CSS Layout Content Not Meeting Footer

[godster]

Hiya guys having some CSS page layout issues which i'm hoping someone can help with. I've tried to fix the footer to the bottom of the page, which seems to be working. The problem i'm having is that the bottom of the content/wrapper is not meeting the footer. I can see this when I apply a different background colour to the wrapper....there is about a 100 pixel gap between the bottom of the wrapper and the start of the footer.

 

Furstratingly, I seem unable to resolve this, but do want the wrapper, irrespective of the size of the content it contains, to always meet the footer flush.

 

In terms of the HTML, the content sits within the wrapper, but I have moved the footer outside of this wrapper to give it full page width and fix it below.

 

Please help!

 

body {
background-color: #000000;
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
width: 900px;
height: 100%;
background-color: #000;
margin: 0 auto;
}
#content {
width: 425px;
margin-left: 210px;
float: none;
margin-bottom: 25px;
height: 100%;
}
#footer {
height: 95px;
width: 100%;
text-align: center;
font-size: 8px;
font-family: 'Calibri', Arial;
float: left;
background-color: #202020;
background-image: url(Images/footerpixel.gif);
background-repeat: repeat-x;
background-position: left top;
display: block;
position: fixed;
bottom: -3px;
}

 

[godster]

To add to this, I also now seem to be struggling between having an absolute or relative footer. Absolute seems to appear correctly at the bottom of my shorter pages, fantastic.....but on a longer page, where scrolling is required, it sits up the page overlapping the content.

 

If i switch to relative, for my scrolling page, fantastic...but on my shoter page, the footer moves up about 100 pixels from the bottom of the page.

 

This is so frustrating....please guys help!.

[haku]

Google 'sticky footers' and try to find on that works for you.

[godster]

On the plus side, I'm finding quite a lot of these "stick footer" tutorials. Is there a consensus on which is the best/most recent technique for a footer that a. sticks to the bottom of the visible area with minimal content and b. floats to the bottom of the scroll on fuller/dynamic pages?

 

Pulling teeth at the moment for what I thought was a fairly simple layout requirement.