Help with Sticky Footer

I'm using a sticky footer for the first time with a site I putting together, however doesn't seem to be going as planned. There appears to be a large white space, and then a black area (this is the color of my footer) please see link http://c-hall.the-word.com/assignment/whatwedo.php I need the footer to butt up to the bottom of the last bit开发者_运维问答 of content, in this case the text witch is yet to be styled. Please see code below - thanks for your help - Charley

CSS

/* sticky footer */
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -335px;
}
.footer, .push {
height: 335px;
background-color: #000;
}
#innerfooter {
width: 847px;
height: 335px;
position: relative;
background-image: url(../images/black_bar.png);
background-repeat: no-repeat;
text-align: left;
margin: 0 auto;
}
/* end sticky footer */

Try this out for size, this will stay at the bottom of the page if the content isn't long enough and prop up the bottom if the content reaches it http://ryanfait.com/sticky-footer/

Look at your html structure (Especially at the .wrapper div.). The placement of the div is wrong.

And read this link: http://www.cssstickyfooter.com/

You are always going to have this gap because the position of your footer is static so it's fixed to the bottom of your browser. This white gap is your body background width unused space. So fill it or eliminate it by less width of your page or any other approach you find appropriate ! The point is I'm not giving you a precise solution but it's more important to understand what you're doing not just applying tutorials.