Make a Div Stick to the Bottom

It’s possible. CSS only. No javascript. No funny-business.

Most of the time I do this for a footer on a website. (See www.weissauctions.com, or our own site even, www.twinharbor.com). The footer should stick to the bottom of the page (or the parent element). If you resize the window and the content doesn’t fill the screen, it should stay down at the bottom. If you need to scroll, it should go out of view. Position:absolute is close but if you have to scroll down, it stays on the bottom rather than moving down where it belongs.

Here’s the elements you need to pull this technique off.

Core html:

<div id="wrapper">
    <div id="content">
        ...put all page content here. anything that should go ABOVE the footer.
    </div>
</div>
<div id="footer">
     Copyright © My Website 2011.
</div>

Minimal CSS:

#wrapper{
min-height:100%;
position:relative;
}

#footer{
clear:both; /* this may not matter if you don't have anything using floats, but it's often quite helpful. */
height: 55px;
margin-top:-55px;
position:relative;
}

#content{
padding-bottom:55px;
}

You can make the height of your footer anything you like, but note that the margin should negate that amount.Also note that you may have to take into account padding or borders and increase that negative margin a bit to compensate. The padding-bottom on the inner content div provides some margin in certain cases to avoid overlap when you shrink the window. I’ve tested this technique in most major browsers and it seems to work well (including IE7!).

I may update this some more…feel free to post your results in the comments!