make html floating elements take up space inside div

html, margin

Solution

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;
}

Problem

I have a floating `<div>` inside another `<div>`, the containing div has a black border... problem is that the floating `<div>` doesn't actually take up the height that it is (about 600px) or so and so the containing `<div>` with the border ends up like 20 px tall with the border going straight through the inner div. How do I make the inner div take up the space it's supposed to, while still having it float? Here is my source: ``` <div style="border:1px solid black"> <div style="float:left;height:200px;"></div> </div> ```

Original source