Footer always at the bottom of the page with CSS

If you want your footer to be always at the bottom of the page and you are one of those who think that tables are for presentation data and not for structure of the page, I will show you how to do this with CSS.

Rule is simple. We give 100% for page, body and main container. We set the height of footer and then we substract that value from the bottom margin our main container. Then we need to add some empty container that push us to the height of the page footer. We are doing it, so page filled up with content will not be obscured by the footer. We substracted that margin so we entered into a diffrent container.

That’s it in words. In practice it looks like that.

We create a document structure more or less as shown below:

And of course following declarations must be in CSS.

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

html, body { 
  height: 100%; 
  text-align:center;
}

#container{ 
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin-bottom:-29px; /* - height of footer */
}

#footer, #push {
  clear:both; 
  height:29px;
}

Basicaly that is all. You need to remember that  height of footer, push and subtracted the margin must have same value. 

Footer stick to the bottom of the page – online example

THe source code