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?

---

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?

---

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.

---

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.