Try the methods below.
The code is more complicated than it normally would be as you have
8px borders. The code depends on height: 100% but borders add to this,
so you would get a little bit of the footer below the window and have to
scroll, but I have deleted the top and bottom borders from the body and
added them to the #header and #footer instead. Use my code as it is in
a separate file to see how it works, then edit into your main file.
I reduced the heights of three divs in the body by 200px so that I could
test in small window heights where marked so add 200px in your final
I checked my version with a validator and it's got no errors but it has this
Byte-Order Mark found in UTF-8 File.
This is because you have saved the code file (I use Notepad as the text
editor) with Encoding UTF-8; the solution is to save it with Encoding
ANSI and this warning will disappear, but first you must change the
copyright symbol to the code equivalent which is & #169; (no space between & and #169; it gets operated in this post if I close the space) as I have done
above, then it validates without the Byte-Order Mark warning.
The above page is a sticky footer method which works in IE6 as well as
modern browsers but it only sticks to the bottom if there is not much
content on the page. If there is more content than the page height, the
footer will stay below the content so that you have to scroll to see it. So
in the method above the footer is only visible at the bottom if the page
doesn't have much content.
A second method for a sticky footer is shown below. The footer shows
all the time and sticks to the bottom in IE7, Firefox and other modern
browsers but won't in IE6 where it stays below the other content and you
have to scroll to see it.
Try both methods in separate files without editing my code in small
windows and drag the window up and down.
See item 1a in the link below which I have used for the second method
above or item 1b which is the first method which also works in IE6:-
Opera doesn't like the first method where the footer can be slightly out of
position but it's OK in IE, Firefox and Safari.
Code downloaded to my PC will be deleted in due course.
WIN7; IE9, Firefox, Opera, Chrome and Safari for Windows; screen resolution usually 1366*768.
Also IE6 on W98 with 800*600 and IE8 on Vista 1440*900.