How to keep footers at the bottom of the page

To keep footer at the bottom of the page is not that simple !

But after a long try I find it out and I am happy to share it with all of my visitors.

It's not that complicated after you got it. But the main solution is to divide your page into three divs inside a main container one.

so you have four divs :

1. Container

2. Header

3. Main

4. Footer

2,3 and 4 are inside 1

The styles below are required for that behavior, Of course it's better place would be on the master page.

html,

body {

margin:0;

padding:0;

height:100%;

}

#container {

min-height:100%;

position:relative;

}

#header {

padding:10px;

}

#body {

padding-bottom:60px; /* Consider Footer Height */

}

#footer {

position:absolute;

bottom:0;

width:100%;

height:60px; /* Footer Height */

}

Modified on 11-07-2011
You can take a look at my next post on this topic