How can I ensure that two floating elements stay side by side, even if there is not enough width for them?

Question

I have the following HTML:

<div > <div > <div style="float: left;"> <input type="checkbox" value="False" /> </div> <div style="float: left;" > XXXXXXXXXXXXXXXXXXXXXXXXXXXXX </div> </div> </div> 

It displays XXX to the right of the checkbox. However, if I reduce the width of the screen, XXX falls under the checkbox.

Is there a way that I can “block” XXX text inside a DIV so that XXXX always displays to the right and on the same line?

(Note that I want to continue to use DIV, as I do some jQuery stuff with DIVs later.)

Answer 1

If you want them to always be on the same line, you can intelligently combine the two divs into one, still floating, and use the white-space property to save it on one line:

 <div> <div> <div style="float:left; white-space:nowrap;"> <input type="checkbox" value="false" /> XXXXXXXXXXXXXXXXXXXXXXX </div> </div> </div> 

Starx's answer very well explains why this cannot be done with two separate floating divs.

edit: http://jsfiddle.net/nkorth/qQSCV/

Answer 2

yep, you can do this by setting a fixed width for the container, for example:

 <div> <div style="width:400px"> <div style="float: left;"> <input type="checkbox" value="False" /> </div> <div style="float: left;" > XXXXXXXXXXXXXXXXXXXXXXXXXXXXX </div> </div> </div> 

Answer 3

This is what float:left should do. He will remain on the left side as much as possible. If the before element also moves to the left side, it will try to move to the left with it, if space is available. Therefore, when you resize the screen and there is not enough space for the div to float with the previous element, it will float left, down the previous element.