title: Float Creates Overlapping Divs
body: <p>I have two divs (one inside of the other) and am running into a bit of a problem when I float the one inside to "left".  The problem is that the outer div doesn't expand its height to fit the text inside of the inner div.  Since this is probably pretty confusing, I'll try to explain it with some code.</p>
  
  <p>HTML:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;body&gt;
      &lt;div id="div1"&gt;
          Inner Div:
          &lt;div id="div2"&gt;Testing long content.&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>#div2 {
      float: left;
      width: 10px;
  }
  </code></pre>
  
  <p>I rather hope that when tested this actually shows my problem as I have not had a chance to test this.  My real code has more properties which I will pose these if needed.</p>