Sticking footer to bottom

Get Started
1

Hi All,

Just wondering what the best way would be to have a footer always stick to the bottom of the page no matter how short the page content is and no matter what resolution the viewing screen is at.

Any suggestions would be appreciated.

Cheers,
Drew

2

Fantastic! Thanks so much; I’ll give this a whirl.

3

This is a method Paul O’Brien, Erik J., Yurikolovsky, a few others and myself worked out during a CSS quiz sometime ago. It’s pretty stable and cross-browser.



html, body {
    height:100%;/* needed to base 100% height on something known*/
}
#wrap {
    background:fffffc;
    width:80%;
    margin:-100px auto 0 auto; /* negative margin to accomodate footer */
    min-height:100%;
}

#header {
    background:black;
    border-top:100px solid #fff; /* soak up negative margin and allows header to start at top of page*/
}
#footer {
    background:#ccc;
    width:80%;
    margin:auto;
    height:100px;/* must match negative margin of #outer */
    clear:both;
}
/*Opera Fix*/
body:before
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}

</style>
<!--[if (lte IE 6)|(gte IE 8)]>
<style type="text/css">
#outer {height:100%;display:table;}
</style>
<![endif]-->
</head>
<body>
<div id="wrap">
    <div id="header">
        <h1>Sticky Footer</h1>
    </div>
    <h2>Ultimate Sticky footer that works in ie5/6/7/8, Opera 9 and 10, Firefox 2+, Chrome, Safari 3+ (and <a href="[http://www.browsercam.com/public.aspx?proj_id=490004](http://www.sitepoint.com/forums/view-source:http://www.browsercam.com/public.aspx?proj_id=490004)">probably every other modern browser</a>)</h2>
    <p>test</p>
    <p style="clear:both">Element with clear:both added</p>
    <p>test</p>
    <p>test</p>
</div>
<div id="footer"><p>Footer</p></div>