title: Div not expanding by content
body: <p>My wrapper div is not expanding in height by it's content. On the other hand, it expands by the header div on the page, and the nav div, but not by the sidebar which lies inside another div. Here is the HTML:  </p>
  
  <pre><code>&lt;div id="wrapper"&gt;
      &lt;div id="header"&gt;
      &lt;/div&gt;
      &lt;div id="nav"&gt;
          nav content goes here
      &lt;/div&gt;
      &lt;div id="pagecontent"&gt;
      &lt;div id="sidebar"&gt;
          some sidebar stuff like login form
      &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and the CSS (only the necessary css, not like webkit box shadows):  </p>
  
  <pre><code>#wrapper {
      width: 900px;
      margin: 0 auto;
      padding-bottom: 80px;
  }
  #header {
      height: 160px;
      width: 100%;
  }
  #nav {
      width: 100%;
      height: 40px;
  }
  #sidebar {
      float: right;
      width: 140px;
      height: 100%;
  }
  #pagecontent {
      width: 900px;
  }
  </code></pre>
  
  <p>the sidebar, which has height 100%, goes outside the wrapper div, you could look at it on <a href="http://craftersinn.net" rel="nofollow">http://craftersinn.net</a></p>