Footer Issue

[Eagle132]

I'm fairly new to web design, and am trying to build a template for a friend. I want the index page to look neat and clean, just one simple page that takes up the entire browser screen no matter what resolution the monitor is.

To do this, it seems that I will have to have the footer stick to the bottom of the screen since the content does not fill the screen up on all browsers. I've found quite a few guides online on how to do this, but for some reason I simply cannot get it to work!

The website is www.andsewon.info (http://www.andsewon.info) if someone would be kind enough to go to it and look at my coding. I am sure there will be many amateur mistakes besides for the footer, so be nice

Thanks in advance for any help given!!
-Eagle132

[Wickham]

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
version.

http://www.wickham43.supanet.com/forumposts/eagleandsewon090223-2.html

I checked my version with a validator and it's got no errors but it has this
warning:-
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.

http://www.wickham43.supanet.com/forumposts/eagleandsewon090223.html

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:-
http://www.wickham43.supanet.com/tutorial/headerfooterfix.html

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.