10

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?

Community
  • 1
  • 1
Razor
  • 17,271
  • 25
  • 91
  • 138

4 Answers4

11

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;
}
JasonS
  • 23,480
  • 9
  • 41
  • 46
  • won't this put it at the bottom of the window not the page? – Stephen Wrighton Oct 11 '08 at 04:27
  • The request was to put the div at the bottom of the "site." Clearly that is open to interpretation between window and page. The sensible interpretation is: window; anyone can pop a div at the bottom of a page. – yfeldblum Oct 11 '08 at 04:42
  • Not anyone. It's actually quite difficult to add a div at the bottom of a page that will stick to it whether the page is full or empty. – Bite code Nov 20 '09 at 11:01
  • This works of course but when you re-size the window the footer overlaps the content – ant Jan 05 '10 at 11:17
2

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

Jonathan Mueller
  • 325
  • 1
  • 3
  • 10
1

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.

Razor
  • 17,271
  • 25
  • 91
  • 138
  • Add bottom padding to your content div which is equal to the maximum height of your footer div. – Keith Williams Oct 13 '08 at 12:52
  • Probably the easiest thing to do would be to apply the same style as you did for your footer to a container div, except specify a fixed "height" for the footer, and use that same number of pixels as the "bottom" position of your container div. However, short content text will become bottom-aligned. – Adam Bellaire Oct 13 '08 at 12:52
0

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!

Meta
  • 1,830
  • 6
  • 24
  • 28