AyushSaran.com

Its hard to get footers positioned right with CSS. There are numerous techniques to do this.

The Problem
If you rely on the footer clearing all other elements, then on smaller pages, the footer wont push to the bottom because the document ends before the screen.

If you specify position:absolute; bottom:0px; left: 0px; … etc… When you load a page longer than the screen display resolution the footer floats on top of content

My Solution

First find the height of the document

function getHeight(){
y = 0;
x = 0;
var test1 = document.body.scrollHeight;
var test2 = document.body.offsetHeight
if (test1 > test2) // all but Explorer Mac
{
x = document.body.scrollWidth;
y = document.body.scrollHeight;
}
else // Explorer Mac;
//would also work in Explorer 6 Strict, Mozilla and Safari
{
x = document.body.offsetWidth;
y = document.body.offsetHeight;
}
innerDim();
}

Now the height of the Viewport [i.e. the visible screen area]

function innerDim(){
var o;
innerH=0;
if (self.innerHeight) // all except Explorer
{
o = self.innerWidth;
innerH = self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientHeight)
// Explorer 6 Strict Mode
{
o = document.documentElement.clientWidth;
innerH = document.documentElement.clientHeight;
}
else if (document.body) // other Explorers
{
o = document.body.clientWidth;
innerH = document.body.clientHeight;
}
changeFooter();
}

Now compare the two , If the document is shorter than the screen force the footer to sit at the absolute positioned bottom:0px.
Else drop it 50px south of the document end for long pages.

function changeFooter(){
var z = y + 50;
var q = innerH - 32;
if (innerH < y){
document.getElementById("footer").style.top = z+"px";
}else {
document.getElementById("footer").style.top = q+"px";}
}