Fixing Chrome resizing behaviour

Question

<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/

Answer 1

On your first div, add this:

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

See if that helps.

Answer 2

I can't reproduce this either, but it seems that you are only zooming the text and I can't find this as an option in Chrome right now.

However you should keep in mind, that this is something that always can happen in any browser, if the user somehow overrides the font-site you specified. There is not much you can do other than keep your layout flexible enough to handle it. For example, in this case don't set the width of the surrounding element in pixels, but in ems so that it is relative to the font-size.

There may be other solutions, such as using other methods of placing elements beside each other, but that would require that you give a more concrete example of what you are trying to achieve, especially explaining you don't want the elements to wrap.

Answer 3

Works just fine on my Chrome 5.

What I could suggest to you is to specify the width on the parent div in "em" instead.. Though it seems that your particular version of chrome had a bug, which has already been fixed :)

Another solution is to set nowrap, as proposed by @Kyle and instead of setting static width - set the min-width. This way the div will expand, instead of having the children wrap to the second line ^_^