title: Wrapper div height is 0 with floated elements inside
body: <p>I have a wrapper <code>&lt;div&gt;</code> which contains two inner <code>&lt;div&gt;</code>s that are floating.</p>
  
  <pre><code>&lt;div class="outside" style="border:1px solid #555;"&gt;
    &lt;div class="inside" style="float:left; width:40px;"&gt;CONTENT&lt;/div&gt;
    &lt;div class="inside2" style="float:left; width:40px;"&gt;CONTENT&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The problem is the wrapper <code>&lt;div&gt;</code> has width of 80px since two inner <code>&lt;div&gt;</code> are 40px each. But always the wrapper <code>&lt;div&gt;</code> is <code>0px</code> in height which makes the border appear like a line at the top.</p>
  
  <p>So I placed the two inner <code>&lt;div&gt;</code>s inside a <code>&lt;table&gt;</code>. It worked well. But how do I avoid this problem without going for a <code>&lt;table&gt;</code>?</p>