Stick footer to bottom CSS tip

At the moment I’m working on a new design for another site I’ve made.
And because of the design I’ve made for that site, the footer had to stick to the bottom all the time.
You can do it with javascript, but here’s a way to do it with some simple CSS.
To do this, you have to make sure you’ll have the following structure within your “body” tags.

open div container
  div header
  div content
  div footer
close div header

The CSS file looks like this:
html,body {
margin:0 auto; /* to center align */
width:960px;
padding:0;
height:100%; /*Required*/
}

#container {
min-height:100%; /*Required*/
position:relative; /*Required*/
}

#header {
background:#fff;
}

#content {
padding:15px;
padding-bottom:60px; /*Required, Height of the footer */
}

#footer {
position:absolute;
bottom:0; /*Required*/
width:100%;
height:55px; /*Required, Height of the footer */
}

What does this do?
Firstly we give the html and body tags a height of 100%.
Then we make sure the container that encapsulates any other div has a minimum height of 100% and we give it a relative position.
Because of the relative position of the container we can put something in it with an absolute position, like the footer in this example.
Give the footer a ‘bottom:0’ to stick it to the bottom of the relative position.
Define the height of the footer and also define it in the ‘content’ tag with the use of ‘padding-bottom’. Set it at the same height as your footer-height.

Voila, that’s it.

Now you can put all the stuff you want between your content div without the worry that your footer isn’t positioned right. It will stick to the bottom. Try it by resizing your window.

Hopefully this tip it will be of any use.

If you're new here or if you like this post, you may want to subscribe to my RSS feed or get your blog updates by email . You can also find out what I'm doing right now by following me on Twitter. Thanks for visiting!

5 Responses to "Stick footer to bottom CSS tip"