Making footer image stick to bottom of web browser or page

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.

Gussie

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!

Lithographer

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

Benzol

How did you edit the code to get it to stay affixed to the bottom of the page? When I enter that code taking away my images and placing in the a colour for the footer and its border the footer and header just stick to the top and bottom of the browser window. What I'd like it to do is when theres alot of content on the page the footer gets pushed to out of view until there is no more content. – Gussie

Ah, I see what you want, and how that differs to the example above. I wanted a fixed header and footer on the screen, so didn't need to adapt the code as you require. – Benzol

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)
}

Reneareneau