Clearing floats for parent container only, not for ancestors?

Question

I have the following layout with 2 levels of floating point containers:

<div id="navigation" style="float: left; width: 150px; height: 200px; background-color: #eee">Navigation</div> <div id="container" style="margin-left: 150px; background-color: #f00"> <div style="float: left; width: 50%; height: 100px; background-color: #ff0">Block</div> <div style="float: left; width: 50%; height: 20px; background-color: #f0f">Block</div> <div style="clear: both"></div> <div style="float: left; width: 50%; height: 50px; background-color: #00f">This Block</div> </div> 

You can see it in http://jsfiddle.net/dNmNj/ mode.

I intend to clear the floats for #container so that the blue block ( This Block ) remains directly under the yellow (and not pink). However, the result is that it also cleared the float for #navigation .

How to clear float only for parent container and not for any ancestor containers?

Answer 1

You can achieve what you want by adding overflow:hidden to your #container :

http://jsfiddle.net/dNmNj/2

this is a good article about cleaning floats

http://www.quirksmode.org/css/clearing.html

but the reason your blue div falls where it is is because the #container div doesn't float - just the margin on the left

The following is a conversion compatible with multiple browsers:

http://jsfiddle.net/dNmNj/3/