CSS: How to Force a Footer DIV to Stick to the Bottom of a Page Programming 06 AUG 2013

css ninja t-shirtWeb page design at the moment has very much settled on the layout of header, content and footer panels. For this particular quick tutorial I’m going to show you how to very simply force your footer div to ‘stick’ to the bottom of the page, meaning that even for pages that are very light on content, your happy little footer bar will remain firmly at the bottom of the browser window, instead of hanging about and looking silly in the middle of the page.

As it turns out, achieving this is relatively simple and the technique can easily be applied to existing websites if necessary. So what needs to be done then?

Well for a start, you need to declare the following CSS rules:

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px; /* bottom matches your desired footer height */
}
#footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
}

And that’s pretty much it. Here’s some sample HTML code to see how it would appear in action:

<!DOCTYPE html>
<head>
    <title>Hello World</title>
</head>
<body>
    <div id=header>Hello World</div>
    <div id=content>Lorem ipsum...</div>
    <div id=footer>My Footer</div>
</body>
</html>

This works in IE8+, Chrome, Firefox, and Opera.

Related Posts:

About Craig Lotter

Software developer, husband and dad to two little girls. Writer behind An Exploring South African. I don't have time for myself any more.