Why is this "clear: both" not interfering with the transfer?

Question

I believe that a DIV with a clear:both styles can make its parent containing the DIV not portable, but below the HTML doesn't seem to work that way.

If the browser window is narrow, the second DIV "OK OK" still wraps on the next line.

 <div style="overflow: hidden;"> <div style="float: left; overflow: hidden; white-space: nowrap"> Hello world 1 Hello world 2 Hello world 3 </div> <div style="float: left; overflow: hidden; white-space: nowrap"> OK OK OK OK OK OK OK OK </div> <div style="clear: both;"> </div> </div> 

Did I miss something?

Answer 1

I think you may not understand the “clear” property. He does not control the packaging specifically, he controls the placement of floating elements, which then appear. There is nothing in your html that prevents the second div from moving to the next line.

Here is a pretty good summary of the cleanup elements: http://www.builderau.com.au/program/css/print.htm?TYPE=story&AT=339278136-339028392t-320002011c

To make the layout not leak, you probably have to specify a hard width in your div container.

Answer 2

Since the two inner divs will move to the left, they will be wrapped when the browser window becomes too narrow. I would suggest that you specify the width on the outer div (the one you are overflowing: hidden). This way the two inner divs can float, but they will not wrap when the browser is compressed.

  <div style="overflow: hidden; width: 600px;"> <div style="float: left; overflow: hidden; white-space: nowrap"> Hello world 1 Hello world 2 Hello world 3 </div> <div style="float: left; overflow: hidden; white-space: nowrap"> OK OK OK OK OK OK OK OK </div> <div style="clear: both;"> </div> </div> 

If you need more control, you may need to implement min-width hackers using expressions in IE; min-width: works in FF.

Answer 3

Add two new properties to your style and it will work!

 text-align: left; width: 1010px; 

  <div style="float: left; overflow: hidden; white-space: nowrap; text-align: left;width: 1010px;"> Hello world 1 Hello world 2 Hello world 3 </div> <div style="clear: both;"> </div> <div style="float: left; overflow: hidden; white-space: nowrap; text-align: left;width: 1010px;"> OK OK OK OK OK OK OK OK </div> <div style="clear: both;"> </div> </div>