Sticky Footer Tutorial

Posted: January 24th, 2010 | 1 Comment »

Even though there is a downloadable demo on the site of how to do this, it has been requested that there also be an accompanying tutorial.

Creating a layout so that the footer sits either at the bottom of the browser window or continues to the bottom of the content isn’t as hard as it seems, though there is a bit of css tricky to do.

Step One – The CSS

First thing to do is reset all default vertical margins like so

* {
	margin:0
}

This is done so that any element that you do use within your html structure doesn’t add any extra height to the page. Some will argue that this type of global reset shouldn’t be used, so should you wish to use a different type of reset then feel free too, just make sure you declare all your used elements within the reset

Now we need to set the height of the page, this is done like so:

html, body {
	height:100%
}

#wrapper {
	min-height:100%;
	height:auto !important;
	height:100%;
}

As you can see the wrapper has 3 height statements within it, this is for various browser compatibility issues and should be done in the same order shown above.

Finally we set the footer size this is done in two places first within the wrapper like so:

#wrapper {
	min-height:100%;
	height:auto !important;
	height:100%;
	margin: 0 auto -100px;
}

What this margin is doing is telling the top to not have a margin, the left and right margins to be automatic and the bottom to have a negative margin of 100px. You would change the 100px to the size of your footer as this is what dictates how much room to leave at the bottom.

Next comes the footer and what is known as the push, as it pushes the page down to the bottom:

#footer, #push {
	height:100px;
}

As you can see the height is 100px which is the same as the negative margin within the wrapper. This 100px should also be changed to reflect the height of your footer.

Put together your css will look something like this

* {
	margin:0
}
html, body {
	height:100%
}
#wrapper {
	min-height:100%;
	height:auto !important;
	height:100%;
	margin: 0 auto -100px;
}
#footer, #push {
	height:100px;
}

Step Two – The HTML

The structure for the html is quite simple.

<div id="wrapper">
Content Here
    <div id="push"></div>
</div>
<div id="footer">Footer here</div>

Notice how the push container is held within the wrapper, if you place this outside the wrapper then this technique will not work. The push container should also remain empty and be the last element within the wrapper, placing other elements within it or after it will make the footer break.

So there you have it a sticky footer. If you want to see it in action and also how to create the footer for a fixed or fluid layout check out the sticky footer templates.

One
Comment

  • vorbestellen schweiz
    June 25, 2010 | Permalink |

    I am working on a new design, which had what I now know is a sticky footer. With your great article I could solve the problem. So my new WordPress design can go online in a few days.

Have Your Say

Your email is never shared. Required fields are marked *
To add code to a comment use this [code] your code here [/code]