CODEWITHSUNDEEP
csshtmltemplates
TIMEX
TIMEX

Reputation: 272184

DIV goes to another line when resizing the browser

I have a main div, and inside it..I have 2 divs, both left aligned.

For some reason(or property), when I drag the right of my firefox to make the browser smaller, the 2nd div goes on to the second line.

I would like this div to stay on the first line, instead of jumping down a line. How can I do that?

I am assuming overflow property?

Upvotes: 1

Views: 4262

Answers (3)

rodedo
rodedo

Reputation: 822

I was having the same problem, you could fix it in different ways: 1. do not make the second inner div (the rightmost one) "floating" 2. give a min-width to both the inner divs so that when the browser size gets too small the second div will anyway not fit and therefore it will not "float" under the other For me the key to understand the float property (assuming I really understood it... ;)) was to understand that setting a div to float and not giving it any width, "shrinks" its width to the content instead of having it occupy the whole space like a banner. Then, float means that it will do all its best to "stay visible" given the width/heght constraints given and the available space.

Upvotes: 2

amphetamachine
amphetamachine

Reputation: 30621

It's a property (and a particularly nice one) of floating elements. You should be able to solve it with specifying style="width:[NUM]%;" instead of using fixed widths.

Imho, fixed widths are really only mixable with scalable sites if they're particularly small in relation to their parent element, or will move out of the way of other stuff.

Upvotes: 1

Robert Greiner
Robert Greiner

Reputation: 29732

This is happening because there is not enough horizontal room for your divs to display side-by-side.

you need to make sure your outer div has a fixed width if your two inner-divs have fixed widths.

Do you have a link to what you are talking about?

Upvotes: 5

Related Questions