Sticky footer is not placed at the bottom

Question

I'm just making some quick changes to the footer.

The footer needs to be sticky, i was following the method described by A List Apart method to try get the footer to stay at the bottom, but it seems to be off just a little bit.

html, body {
height: 100%;
 }
#container {
position: relative;
min-height: 100%;
}

<div id="container">
    <div id="content">...</div>
    <div id="footer">...</div>
</div>

Answer 1

I always use the CSSStickyFooter method.

• HTML, a basic skeleton

  <div id="wrap">
  
      <div id="main">
  
      </div>
  
  </div>
  
  <div id="footer">
  
  </div>          
  

• CSS, this is only a snippet

  * {margin:0;padding:0;} 
  
  html, body {height: 100%;}
  
  #wrap {min-height: 100%;}
  
  #main {overflow:auto;
      padding-bottom: 180px;}  /* must be same height as the footer */
  
  #footer {position: relative;
      margin-top: -180px; /* negative value of footer height */
      height: 180px;
      clear:both;}