Fixing Chrome Resize Behavior
<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>
Paste the above HTML here: http://htmledit.squarefree.com/
And then zoom out in Chrome, you will see that <div>
B will eventually reset to the next line. If you do the same in Firefox and IE, both <div>
A and B will stay on the same line.
Adding a height attribute to the parent <div>
might help, but if the height of the content is not known beforehand, it won't be possible.
I would like to know how this problem can be fixed in Chrome.
Many thanks to all of you.
EDIT: Uploaded screenshot here: http://img52.imageshack.us/i/screenshot1xd.jpg/
a source to share
I can't reproduce this either, but it seems like you're only zooming in on the text, and right now I can't find it as an option in Chrome.
However, you should keep in mind that this can always happen in any browser if the user overrides the site font you specified in some way. There isn't much you can do other than keep your layout flexible enough to handle this. For example, in this case, do not set the width of the surrounding element in pixels, but in em
so that it is relative to the font size.
There might be other solutions, such as using other methods of placing elements next to each other, but for that you need a more specific example of what you are trying to achieve, especially explaining that you don't want the elements to wrap.
a source to share
Works well on my Chrome 5.
What I can suggest you is to specify the width of the parent div in "em" instead. Although it seems that your specific version of chrome had a bug that has already been fixed :)
Another solution is to set nowrap as suggested by @Kyle and instead of setting static width - set to min width. This way the div will expand instead of the children wrap the second line ^ _ ^
a source to share