Hello
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:
+10
A:
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
2008-10-11 04:20:58
won't this put it at the bottom of the window not the page?
Stephen Wrighton
2008-10-11 04:27:50
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.
Justice
2008-10-11 04:42:09
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.
e-satis
2009-11-20 11:01:15
This works of course but when you re-size the window the footer overlaps the content
c0mrade
2010-01-05 11:17:33
+1
A:
Float the content div and have the footer div use clear: both.
JonathanMueller
2008-10-11 04:39:35
+1
A:
Hi everyone
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.
Sir Psycho
2008-10-13 12:38:51
Add bottom padding to your content div which is equal to the maximum height of your footer div.
Keith Williams
2008-10-13 12:52:08
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
2008-10-13 12:52:13
A:
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!
TankDriver
2010-05-07 17:41:34