Same problem as before (see http://stackoverflow.com/questions/3118932/sticky-footer-but-only-sometimes and http://stackoverflow.com/questions/3119399/sticky-footer-but-only-sometimes-continued)...

I've got a footer that I wish to stay with the foot of the page unless of course content fills the page, i quickly would like it to get pressed lower. I have carried this out twelve occasions along with other sites, however i can't get that one to operate. Employed in Wordpress. I have checked an order of my divs and I have reviewed the css...any assistance is appreciated.

The primary css components:

* {
    margin: 0;
    padding: 0;
}

html, body {
    height:100%;
    min-height:100%;
}

#wrapper {
    background:url("images/shadowborder.png") repeat-y center;
    width:100%;
        max-width:100%;
        min-width:980px;
    min-height:100%!important;
        margin:0 auto;
    margin-bottom:-20px;
    position:relative;
    overflow:auto;
}

#content {
    clear:both;
    float:left;
    padding:20px 20px 60px 20px;
    font-size: 1.6em
}
#spacer {
    height: 40px;
    clear: both;
}

#footer {
    position: relative;
    border-top: 1px solid #e5a5fc;
    padding:3px!important;
    height:20px;
}

The website:

http://www.hcfmissoula.com

The recipe I personally use is:

  • height: 100% on html
  • min-height: 100% and position: relative on body (with height:100% for ie6)
  • position: absolute and bottom: 0 around the footer div

Maybe be tricky stopping footer from covering some text close to the bottom though.