title: Margin causes 100% height to give horizontal scrollbars
body: <p>It's been a while since I handcoded a website, and now I have the issue that my top-margin causes the 100% height to give a nasty scrollbar, as seen in the fiddle:
  <a href="http://jsfiddle.net/qKGzA/" rel="nofollow">http://jsfiddle.net/qKGzA/</a></p>
  
  <p>I can't figure out how to get rid of this, without cutting off the footer (like with using overflow:hidden).
  It probably is a simple solution but I can't think of it :)</p>
  
  <p>Thanks for your help!</p>
  
  <p>My code:</p>
  
  <pre><code> html, body{
      background-color:#ececec;
  
      height:100%;
      width: 100%;
  
      margin:0;
      padding:0;
  
  }
  
  div#wrapper{
      background-color:#ffffff;
  
      width: 962px;
      height: auto !important;
      min-height: 100%;
      height:100%;
  
      margin:0 auto;
      padding:20px 15px 0px 15px;
  
      position:relative;
      display:block;
  }
  
  footer{
      background-color:#363636;
  
      width:95%;
      height: 15px;
  
      margin:0;
      padding:10px;
  
      position:absolute;
      bottom:0;
  
      font-family:Arial, Helvetica, sans-serif;
      font-size:12px;
      color:#e1e1e1;
      text-align:center;
  }
  
  footer p{
      margin:0;
      padding:0;
      display:inline-block;
  }
  footer p.divider{
      margin:0 20px;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;body&gt;
  
  
  &lt;div id="wrapper" &gt;
      &lt;header&gt;
      header header
      &lt;/header&gt;
      &lt;menu&gt; Menu menu&lt;/menu&gt;
      &lt;section&gt;
      section section
      &lt;/section&gt;
      &lt;footer&gt;
      &lt;p&gt;x&lt;/p&gt;&lt;p class="divider"&gt;~&lt;/p&gt;
      &lt;p&gt;x&lt;/p&gt;&lt;p class="divider"&gt;~&lt;/p&gt;
      &lt;p&gt;x&lt;/p&gt;&lt;p class="divider"&gt;~&lt;/p&gt;
      &lt;p&gt;x&lt;/p&gt;
      &lt;/footer&gt;
  &lt;/div&gt;
  
  
  
  &lt;/body&gt;
  </code></pre>