How can I ensure two floated items stay side-by-side even if there isn’t enough width for both of 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 the XXX to the right of the checkbox. However, if I reduce the screen width, the XXX goes under the checkbox.

Is there any way that I can "lock" the XXX text inside the DIV so the XXXX always appears to the right and on the same line?

(Note that I want to keep using DIV as later on I do some jQuery things with the DIVs.)

Answer 1

If you want them to always be on the same line, you can reasonably combine the two divs into one, still floated, and use the white-space property to keep 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 explains very well why it's not really feasible to do this with two separate floated divs.

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

Answer 2

yep, you can do that by setting fixed width for the container, like so:

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