title: Wrapper div won't expand with Content div
body: <p>I have tried about 15 different tutorials and tricks to get my footer, header, and three content divs working.</p>
  <p>My page will have a header, navigation bar on the left, content in the middle, shop and Google ads on the right and a footer down below</p>
  <p>Now after trying a few tutorials I've finally gotten my footer to stay under the wrapper but unfortunately the wrapper won't grow bigger if the content or ads or navigation goes bigger, so the content and all will go outside of the wrapper box and over the footer.</p>
  <p>Could someone please tell me what I'm doing wrong?</p>
  <p>Here's my code:</p>
  <pre><code>&lt;div id=&quot;Header&quot;&gt;
      header
  &lt;/div&gt;
  &lt;div class=&quot;Wrapper&quot;&gt;
      
      &lt;div id=&quot;Navigation&quot;&gt;
          Navigation &lt;br /&gt;
          Nav 2 &lt;br /&gt;
          Yes
      &lt;/div&gt;
      
      &lt;div id=&quot;Content&quot;&gt;
          content goes here
      &lt;/div&gt;
      
      &lt;div id=&quot;Ads&quot;&gt;
          Ad1 &lt;br /&gt;
          ad2
      &lt;/div&gt;
      
      &lt;div class=&quot;Push&quot;&gt;&lt;/div&gt;
      
  &lt;/div&gt;
  
  &lt;div class=&quot;Footer&quot;&gt;
      Footer
  &lt;/div&gt;
  </code></pre>
  <p>CSS:</p>
  <pre><code>.Wrapper {
      position: relative;
      width: 1000px;
      margin-left: auto;
      margin-right: auto;
      min-height: 100%;
      height: auto !important;
      height: 100%;
      padding-bottom: -150px;
      padding-top: -150px;
      border: thin solid #000;
  }
  #Header {
      position: relative;
      height: 150px;
      width: 1000px;
      margin-right: auto;
      margin-left: auto;
  }
  #Navigation {
      position: absolute;
      width: 235px;
      left: 5px;
  }
  #Content {
      position: absolute;
      width: 500px;
      padding-right: 250px;
      padding-left: 250px;
      height: 100%;
      overflow: auto;
  }
  #Ads {
      position: absolute;
      width: 235px;
      right: 5px;
  }
  .Footer {
      position: relative;
      height: 150px;
      width: 1000px;
      margin-left: auto;
      margin-right: auto;
      clear: both;
  }
  .Push {
      height: 150px;
      clear: both;
  }
  body, html {
      height:100%;
      margin:0px;
      padding:0px;
  }
  </code></pre>
  <p>On jsfiddle: <a href="http://jsfiddle.net/PskYb/1/" rel="nofollow noreferrer">http://jsfiddle.net/PskYb/1/</a></p>