Make html floating elements take up space inside a div

Question

I have a floating <div> inside another <div> containing the div has a black border ...

the problem is that the floating <div> does not actually take a height that is equal to (about 600 pixels) or so, and therefore containing the <div> with the border ends up as 20 pixels high with the border going straight through the inner div.

How to make the inner div occupied by the space in which it should have been, but still floating?

Here is my source:

 <div style="border:1px solid black"> <div style="float:left;height:200px;"></div> </div> 

Answer 1

Using the micro-clearfix method :

 <div style="border:1px solid black" class="cf"> <div style="float:left;height:200px;"> </div> </div> 

CSS

 .cf:before, .cf:after { content: " "; /* 1 */ display: table; /* 2 */ } .cf:after { clear: both; } /** * For IE 6/7 only * Include this rule to trigger hasLayout and contain floats. */ .cf { *zoom: 1; }