title: Div with overflow: hidden doesn't clear padding of floating unordered list
body: <p>I was trying to get my div that contains floating elements, to enlarge to encompass them, but it doesn't seem to pay attention to the padding of the elements, effectively chopping them off.  How can I get the div to be the correct height for my list items?</p>
  
  <p>html:</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;link type="text/css" rel="stylesheet" href="/stylesheets/test.css" /&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;div class="nav"&gt;
        &lt;ul class="nav"&gt;
          &lt;li class="nav"&gt;&lt;a class="nav" href="#"&gt;One1&lt;/a&gt;&lt;/li&gt;
          &lt;li class="nav"&gt;&lt;a class="nav" href="#"&gt;Two&lt;/a&gt;&lt;/li&gt;
          &lt;li class="nav"&gt;&lt;a class="nav" href="#"&gt;Three&lt;/a&gt;&lt;/li&gt;
          &lt;li class="nav"&gt;&lt;a class="nav" href="#"&gt;Four&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
  
      &lt;div class="after"&gt;&lt;h2&gt;Heading&lt;/h2&gt;&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>ul.nav, ul li.nav {
    display: inline;
    margin: 0px;
    padding: 0px;
  }
  
  ul.nav {
    list-style-type: none;
  }
  
  li.nav {
    display: block;
    float: left;
    background-color: red;
  }
  
  a.nav {
    background-color: green;
    padding: 10px;
    margin: 0;
  }
  
  a:hover.nav {
    background-color: gray;
  }
  
  div.nav {
    background-color: blue;
    overflow: hidden;
    width: 100%;
  }
  
  div.after {
    clear: left;
  }
  </code></pre>