Sticky Footer

This is the WRONG WAY to do a sticky footer!A sticky footer is a footer that stays at the bottom of your web page. This is easy to do if you have long content that pushes the footer down, but what if you have short content? Normally, the footer slides up the page to the bottom of the content, leaving white space from the bottom of the footer to the bottom of the browser window. This tutorial will show you how to set up your footer to stay at the bottom of the browser window when there is only a little content on the page but still stay beneath the content when it goes past the bottom of the window.

HTML Structure

The first thing we need to do is set up our HTML. Using the <div> tag we’ll break the page up into sections that, with CSS, we’ll style to create the Sticky Footer effect.

<html>
<head>
<title>Sticky Footer</title>
<link href=”style.css” rel=”stylesheet” />
</head>
<body>
<div id=”wrapper”>
<div id=”header”></div>
<div id=”content”></div>
<div id=”footer”></div>
</div>
</body>
</html>

The structure has a “wrapper” div that contains the “header”, “content”, and “footer” divs. This wrapper is important.

CSS Styling

With the structure set, we start with some basic styling rules to set up the page:

*{margin: 0px; padding: 0px;}

html, body{height: 100%; width: 100%;}

div#wrapper{min-height: 100%; width: 960px; margin: 0px auto; position: relative;}

div#content{padding-bottom: 150px;}

div#footer{width: 960px; height: 150px; position: absolute; bottom: 0px;}

Statement by statement, here’s what this does:

First, we eliminate all padding and margin. You can set these for each element later as you need them.

Second, we set the HTML and body height and width to 100%. This will make the page fill the browser window.

Third, we set the “wrapper” div to have a minimum height of 100%, so it will stretch to the bottom of the window. Setting the width and margin as they are centers the content of the page (which is just for looks). The position rule doesn’t do anything to the wrapper, but it is necessary to allow us to set some other rules for the footer later.

Fourth, the content area. Here we set the bottom padding to 150px. How do we get this number? It’s the height of the footer, plus the bottom margin of the content area. Since the footer height is set to 150px and the content bottom margin is set to 0px, the bottom padding is 150px.

Last is the styling for the footer itself. We already discussed the height. The width is not really necessary unless you are centering your footer content. I have it set to the same width as the wrapper div. Here’s the important stuff: we set the positioning to absolute, meaning it is pulled out of the normal page flow, and we set the bottom property to 0px, which will snap the footer to 0px from the bottom of the containing element, the wrapper div.

Why it Works

If we hadn’t set the wrapper’s positioning to relative then it would snap to the browser window instead. If that were the case then your content would go behind the footer if it was longer than the browser window. This way if the content doesn’t fill the browser window the footer snaps to the bottom of the wrapper, which we have stretching at minimum to the bottom of the window. If the content is longer, the wrapper will stretch to contain it, and the footer will stay at the bottom of the wrapper.