<div style="background-color:red;width: 300px;">


 <div style="float:left;border:1px solid yellow;">AAA AAA AAA</div>

 <div style="float:left;border:1px solid green;">BBB BBB BBB</div>


 <div style="clear:both;"></div>

</div>

Pasting the above HTML here: http://htmledit.squarefree.com/

And then zoom out in Chrome, you will see that <div> B will eventually be forced down to the next row. If you do the same thing in Firefox and IE, both <div> A and B will stay on the same row.

Adding a height attribute on the parent <div> may help, but if the height of the content is not known beforehand, this will not be feasible.

I would like to know how this problem can be fixed in Chrome.

Many thanks to you all.

EDIT: uploaded a screenshot here: http://img52.imageshack.us/i/screenshot1xd.jpg/