Making footer image stick to bottom of web browser or page - css

Question

I know this has been asked alot of times in the past but for the life of me I can't seem to get any of the other solutions to work.
What I'm trying to do is to get the footer (which is an image that repeats across the width of the page) to stick to the bottom of the browser when there isn't enough content to naturally push it to the bottom of the page and when there IS enough content to push it to the bottom it does just that. An example is the one at http://www.themaninblue.com/experiment/footerStickAlt/good_example_short.htm which does exactly what I want but I can't get to work either.
The code that I've currently got implemented makes the footer stick to a certain section of the page with text going under it. You can see it at sourcectrl.co.uk but its not much to look at. Heres the code for your viewing pleasure.
html, body {
font: 100% Arial, Helvetica, sans-serif;
height: 100%;
color: #597347;
margin: 0;
padding: 0;
background: #573909;
}
header {
display: block;
position: relative;
top: 0;
left: 0;
width: 100%;
height: 66px;
background: url(../images/FillerPage_01.gif) repeat-x left bottom;
}
section {
width: 940px;
margin: 0 auto;
font-size: 1.4em;
overflow: auto;
min-height: 100%;
height: auto !important;
height: 100%;
margin-bottom: 87px;
position: relative;
padding-bottom: 90px;
}
footer {
display:block;
position: absolute;
bottom: 0;
width: 100%;
height: 87px;
background: url(../images/FillerPage_08.gif) repeat-x left bottom;
}
Sorry if it seems messy! I'd just like to know if I'm heading in the right direction or theres something I'm just not getting? Oh yeah I'm trying to do all of this with the html 5 markup which is why there is no #footer and the like (could this be why none of the solutions work?).
If anyone could give me any help or guidance I'd be soooooo grateful.

Answer 1

I believe the code you are looking for is here:
http://www.themaninblue.com/writing/perspective/2005/08/29/
I implemented this just now on my site, and it's working great!
it's a while since you asked your question but hopefully this helps!

Answer 2

This is the source that helped me achieve such a layout :
http://www.jaydepro.com/blog/post/Frameless-page-header-and-footer-using-CSS.aspx

Answer 3

Put everything in the Main in a Wrapper and use the following code:
html, body, form
{
height: 100%;
}
#wrapper
{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -80px; (-80px will be different for you, usually the same as the footer but negative but mine is different)
}
#footer, .push
{
height: 60px; (This is just the height of MY footer, change this to whatever size your footer is)
}