CSS Sticky Footer – Making your website footer stay at the bottom of the page tutorial

Many times have I seen a beautifully designed website that is pixel perfect until you stumble on a page that doesn’t have quite enough content on the page. As a result the footer is sitting in the center of the page, it just looks silly and out of place. There have been many versions of this code circulating on the internet but this is the one I use on almost all of my projects to make sure those pesky footers stay at the bottom where they belong.

HTML

<div id="wrap">

    <div id="header">

    </div>

    <div id="main">

    </div>

</div>

<div id="footer">

</div>

CSS

The following CSS really doesn’t need to much explaining its quite easy. The only thing you will need to change is the padding on the main div and the height of the footer div. This should be set to whatever height your footer is at the moment, but make the values match or it wont work.

html, body {height: 100%;}

#wrap {min-height: 100%;}

#main {overflow:auto;
    padding-bottom: 150px;}  /* must be same height as the footer */

#footer {position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    clear:both;}

/*Opera Fix*/
body:before {
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/
}

IE Fix

As always IE isn’t very happy with that code.  We just need to change the style formatting on the wrap div and everything should work great.

<!--[if !IE 7]>
    <style type="text/css">
        #wrap {display:table;height:100%}
    </style>
<![endif]-->

I haven’t included a download of the project but if anyone would like it I can always add a link just drop me a message.