Web 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.