HTML footer problem

Question

Is it possible to create a footer div that sits at the bottom of a site regardless of how much information is present in the middle?

Currently the div I have is positioned depending on how much content i have in the body.

See also:

How do you get the footer to stay at the bottom of a Web page?

Answer 1

I am by no means a css expert, but this works for me across the major browsers:

.d_footer
{
    position:fixed;
    bottom:0px;
    background-color: #336699;
    width:100%;
    text-align:center;
    padding-top:5px;
    padding-bottom:5px;
    color:#ffffff;
}

Answer 2

JonathanMueller is right, that works perfectly.

I had been looking through posts trying to do it like this. All I could find was fixed to the bottom of the window. Thanks!

Answer 3

I know I marked this as being answered but I've run into another problem as a result. The footer sits nicely at the bottom of the page, however, if the content goes past the footer, the footer simply floats over the content.

Is there a way to keep the footer at the bottom of the page without it overlapping if the content goes past the bottom?

My gut feel is using an iframe but Im not sure how to do it.

Answer 4

Float the content div and have the footer div use clear: both.