Hello, 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.