PLEASE NOTE: This technique has been updated & streamlined for HTML5.
Click here for the updated post
Ideally we want the situation above, where the footer naturally rests on the bottom of the browser irrespective of the amount of content on the page. In a nutshell, you need to set the height of a container layer or div to 100% and create a content div and a footer div within this.
The content div’s height is also set at 100%. This will push the footer off the bottom of the page, immediately below the fold. Lets say you want the footer to be 100px high.
Now set the bottom padding of the content div to 100px. This will create empty space at the bottom of the div for the footer to fit into. Finally, set the top margin of the footer to -100px. This will move the footer up into the 100px space you created with the contents bottom padding.
I’ve created a starting template for all sites I create. You can download it here.
It contains a html file & css starting point. I’ve also added a header along with the footer & content divs. Its 800px wide and centred. its fairly simple to figure out & modify. Have a look.