title: Sticky footer with padding and margins - working in FF but issues with Chrome and IE
body: <p>I am trying to implement a sticky footer for a site i'm working on (<a href="http://www.exstockbearings.co.uk" rel="nofollow">see here</a>). I attempted to follow the guide on <a href="http://www.cssstickyfooter.com/" rel="nofollow">CSS Sticky Footer</a> - specifically, <a href="http://www.smipple.net/snippet/Owlyfool/HTML5%20Boilerplate%20Sticky%20Footer%20With%20100%25%20wide%20centered%20header/footer%20CSS" rel="nofollow">this</a> implementation.</p>
  
  <p>This is working perfectly in Firefox (13) but in Chrome (21) and IE (9) the #footer is pushed further down the page adding a vertical scroll bar. I assume this is something to do with the use of padding and margins inside my #wrapper - however I am unable to put my finger specifically on the issue. I would really appreciate some help.</p>
  
  <p>The site structure:</p>
  
  <pre><code>&lt;html&gt;
      &lt;div id="wrapper"&gt;
          &lt;div id="header"&gt;&lt;/div&gt;
          &lt;div id="menu"&gt;&lt;/div&gt;
          &lt;div id="page"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="footer"&gt;&lt;/div&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and the relevant CSS:</p>
  
  <pre><code>#wrapper {
      min-height: 100%;
      width: 100%;
  }
  #header { 
  background: url("/images/backgrounds/transparent.png") transparent;
      border-bottom: 2px solid #EF7C31;
      height: 44px;
      margin: 0 auto 20px;
      width: 960px;
  }
  #menu { 
  background:#FFFFFF;
      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
      height: 60px;
      margin: 0 auto 20px;
      padding: 10px 20px;
      width: 920px;
  }
  #page {
  background: #FFFFFF;
      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
      margin: 0 auto 30px;
      overflow-x: hidden;
      overflow-y: auto;
      padding: 20px 20px 30px;
      width: 920px
  }
  #footer {
  background: url("/images/backgrounds/transparent.png") transparent;
      border-top: 2px solid #EF7C31;
      clear: both;
      height: 116px;
      margin-top: -158px;
      overflow: auto;
      padding: 20px;
      position: relative;
  }
  </code></pre>
  
  <p>Thank you</p>