making a footer stick to the bottom of the page

I am having a nghtmare with some code on a site I am making, should be pretty simple but it isn't proving so.

I want my footer to stick to the bottom of the page, but for all the content to come first (when there is more than a page worth, if that makes sense)

I have been able to do it in Safari, Chrom and Firefox but suprise suprise Internet Explorer is proving to be the main problem.

Am at a point now where it is on the bottom however the footer appears over the content of the page when there is alot (See the 'Who we are' tab).

I would really appreciate any help whatsover on this as it is really begining to annoy me, been going back an fort changing code for a good few hours now.

Below is the CSS that accompanies the page, like I said any help on this would be REALLY appreciated.

  • { border:0px; margin:0px; padding:0px; }

html {

height:100%; }

banner {

padding: 5px 0px 10px 0px;


container {

width:970px; margin:0 auto; height: 100%; position: relative;


wrapper {

position: relative; min-height: 100%;


nav {

margin-left:0px; text-indent:0px; text-align:center;


menutab li {

display:inline; list-style-type:none; font-family:Arial; font-size:18px; font-weight:100; text-align:center;


menutab a {

color:#9ea3ab; padding:5px 32px 5px 32px; text-decoration:none; text-align:center;


menutab b {

color:#9ea3ab; padding:5px 0px 5px 0px; text-decoration:none; text-align:center;


menutab a:hover {



social .socialImage{float:right;


.divFloat { float:right; padding:0px 5px 0pc 0px; }

.clear { clear:both; }

social {



footer {

Position:fixed; bottom:0; width:970px; height:45px; background-image:url(images/footer.gif); width:970px; height:45px;


footermenu .footermenu{float:right;


footermenu li {

display:inline; font-family:Arial; list-style-type:none; font-size:16pt;


footermenu a {

color:#9ea3ab; font-family:Arial; padding:0px 5px 0px 0px; text-decoration:none; text-align:right;


footermenu a:hover {



.clearfooter { height:45px; clear:both; }

address {

color:#28957f; font-family:Arial; font-size:16px; text-indent:5px;


address2 {

color:#9ea3ab; font-family:Arial; font-size:14px; text-indent:5px;


contentbackground {

background-image:url("images/homebackgroundimage.gif"); width:970px; height:400px;


contentbackgroundcontact {

background-image:url("images/contactbackgroundimage.gif"); width:970px; height:330px;


contentbackgroundyouth {

background-image:url("images/youthbackgroundimage.gif"); width:970px; height:350px;


contectbackgroundwhoweare {

background-image:url("images/whowearebackgroundimage.gif"); width:970px; height:700px;


contentbackgroundmusic {

background-image:url("images/musicbackgroundimage.gif"); width:970px; height:360px;


contentbackgroundbrand {

background-image:url("images/brandbackgroundimage.gif"); width:970px; height:500px;


content {

color:#9ea3ab; font-family:Arial; font-size:14px; padding:5px 30px 5px 50px; text-decoration:none; text-align:top;


content2 {

color:#9ea3ab; font-family:Arial; font-size:14px; padding:5px 30px 5px 70px; text-decoration:none; text-align:top;


contentcontact {

color:#9ea3ab; font-family:Arial; font-size:16px; padding:5px 30px 5px 50px; text-decoration:none; text-align:top;


h1 { color:#9ea3ab; font-family:Arial; font-size:16px; padding:5px 30px 5px 35px; text-decoration:none; text-align:top; }

body { height: 100%; background-image:url("images/denimbackground.gif"); repeat; }


Works for me if I remove the position:absolute in the #footer CSS directive.
Including in IE.

Category:css Time:2011-02-20 Views:0

Related post

Copyright (C), All Rights Reserved.

processed in 0.573 (s). 13 q(s)