title: div with floating elements 100% height of its content?
body: <p>Why does my parents div "dad" not take the height of its children? 
  <a href="http://jsfiddle.net/MeHyJ/" rel="nofollow">http://jsfiddle.net/MeHyJ/</a></p>
  
  <pre><code>&lt;div id="dad"&gt;
      &lt;div class="float"&gt;1&lt;/div&gt;
      &lt;div class="float"&gt;2&lt;/div&gt;    
      &lt;div class="float"&gt;3&lt;/div&gt;      
      &lt;div class="float"&gt;4&lt;/div&gt;  
  &lt;/div&gt;
  
  #dad {
  
  height:100%;
  width:100px;
  border:1px solid black;
  }
  .float {
  width:50px;
  height:50px;
  background-color:red;
  float:left;
  }
  </code></pre>