Forums

Sticky Footer

Permalink
I've been wrestling with a sticky footer all day. I'm close but it's behaving a bit weird. I'm hoping someone will see what I'm doing wrong. You can see the dev site at apps4easyliving.com/index.php. The footer sticks to the bottom of the page but it doesn't stop in the right place if the content is taller than the window. The content inside the footer seems to stop in the correct place but the background/div keeps right on going. Any suggestions would be much appreciated. My CSS for the main two divs is below as well. Thanks in advance
#page{
   text-align:left;
   min-height: 100%;
   height: auto !important;
   height: 100%;
   width: 800px;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: -133px;
}
#footer{
   color:#999;
   border:1px solid #aaaaaa;
    -webkit-border-radius:5px 5px 0px 0px;
    -moz-border-radius:5px 5px 0px 0px;
Viewing 15 lines of 24 lines. View entire code block.
 
ijessup replied on at Permalink Reply
ijessup
I don't think its a CSS issue as much as a HTML issue.

Your footer is missing a closing div tag, which you commented out.
Saxafrass replied on at Permalink Reply
Fixed that but still having problems. Any other help would be much appreciated. Thanks
Saxafrass replied on at Permalink Best Answer Reply
Ok I think I got it. I had to add bottom-padding to #page #central.no-sidebar div. Then also ad the negative margin to the footer. Problem before was that I was trying to add the padding to #page and not the divs within it. For anyone that is interested here is my abridged css:
html, body {
   height: 100%;
}
#page{
   min-height: 100%;
}
#page #central.no-sidebar{
   padding-bottom: 130px;
}
#footer{
   height: 130px;
   margin-top: -130px;
}

and the basic html:
<html>
  <body>
    <div id="page">
      <div id="central">
      </div>
    </div>
    <div id="footer">
    </div>
  </body>
</html>