title: Why this footer overlaps content above
body: <p>I have a dialog box with a footer, which sometimes overlaps the preceding content, depending on the content. The content has a mixture of float, width, overflow and padding styles.
  Below is a distilled version of that issue.</p>
  
  <p>Here is the HTML:</p>
  
  <pre><code>&lt;div style="padding:5px"&gt;
    &lt;div class="description"&gt;AAAAAAAAAAAAAAA&lt;/div&gt;
    &lt;div class="description"&gt;BBBBBBBBBBBBBBB&lt;/div&gt;
    &lt;div class="description"&gt;CCCCCCCCCCCCC&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="tricky" class="broken"&gt;&lt;/div&gt;
  &lt;div style="background: yellow"&gt;Footer&lt;/div&gt;
  </code></pre>
  
  <p>and the styles:</p>
  
  <pre><code>.description {
      float: left;
      width: 100%;
  }
  
  .broken {
      overflow: auto;
      width: 5px;
  }
  
  .fixed {
      overflow: auto;
      width: 5%;
  }
  </code></pre>
  
  <p>The expected result would be to have only Footer yellow. For some reason "description" divs are also yellow. If I change class of #tricky from "broken" to "fixed" then it looks as expected. The only difference between these styles is that width is specified either in px or %.
  If I remove div #tricky the problem also occurs.</p>
  
  <p>I've made it also available as a <a href="http://jsfiddle.net/pgx1qy7r/1/" rel="nofollow">fiddle</a>. There is a toggle button to quickly see effect of the different styles.</p>
  
  <p>Please help me understand why these styles makes the footer expand.</p>