A little neat trick that I’ve now used a few times at work and for other sites I develop is to always make the footer of the site at the bottom. Easy enough you may think at first, but it must stick to the bottom of the browser window, no matter what size the window is re-sized to, or how much or how little content the page has.
A List Apart has a great tutorial on how to do this, and although a little lengthy, their version 3 example page is good enough to use as a basis for your page.
The methods behind this are simple enough after you’ve studied the code for a few moments. First of all, make sure you contain all of your page in… (including the header/footer, etc)
<div id="container">
Secondly, a very important part of the CSS they provide is …
html, body {
height: 100%;
}
Which forces the height to be 100% of both the HTML and Body tags - note that it must be both! I’ve spent far too long in the past trying to work out why my page wasn’t working when I missed the fact the height 100% was applied to the HTML as well as the Body tag.
From there on, the source code on their page should be easy enough to follow as a guideline. I use their Example 3 since its relatively simple and doesn’t include any Javascript. Although it doesn’t support all browsers, it does support the majority (Firefox, IE’s), and that’s good enough for me







2 comments so far, what do you think? ...