Menu
I have a problem with fixing the footer to the bottom of the browser .. The problem is when resolution changes or windows resizes the footer content overlaps the content of the website, here is the current css for footer div
div.footer {
position:absolute;
bottom:0px;
}
Does anybody knows how can I fix this? Thank you
UPDATE:
This is what I need exactly but for some reason it doesn't work for my web page, it does work when I cut paste code to the blank page, but since my page is full with content and everything, what are the important elements to include? Hereis the url.
The above trick works only if my website has filled content if I have some lets say few lines the above trick doesn't work.
UPDATE II
My website has dynamic content so I think can't use this sort of CSS Sticky footers because sometimes the website will just have few lines sometimes be packed with content. Thats why the footer is not sticking to the bottom of the webpage.. its not problem to stick the footer if there is plenty content on the website the problem is without.
797
What you have here is a common problem for which there is no common answer, but what I would try if I were you since all these above suggestions apparently aren't working, I'd try to set my page container background to any color let say white (#FFFFFF) and I'd set background color of body to any other then white let say grey (#CCCCCC). And finaly set footer position to relative and of course it must be placed after everything if you want it alway to be at the bottom. This way you'll get what you need 100 % sure if you follow step by step instructions.
90
Checkout CSS Sticky Footer for an excellent cross-browser compatible method.
What that site essentially does is make the footer stick BENEATH the browser edge, and gives it a negative margin that has the same value as the footer's height. This way, the footer is sure to stick to the bottom.
38
You can add a push div to the last element before the footer in order to always assure that the footer doesn't overlap the content.
Given this example:
<html>
<body>
<div class="header" />
<div class="content" />
<div class="footer_push" />
<div class="footer" />
</body>
</html>
If <div class="footer" /> is always 75px high, use the following CSS:
html, body { height: 100%; } /* Take all available vertical space */
/* Push the bottom of the page 75px.
This will not make scrollbars appear
if the content fits already. */
.footer_push { height: 75px; }
/* Position the footer */
.footer { position: absolute; bottom: 0; height: 75px; }
Basically you need to give the footer a fixed height and to push the footer with another div of the same height to the bottom. There's however more browser specific stuff which you need to take into account:
html and body must besides having a height of 100% no (default) margin to avoid the footer being pushed further to below that amount of margin.p and div elements throughout the page must have no margin-top to avoid the footer being pushed further to below that amount of top-margins in under each Firefox.div must use min-height of 100% instead of height to avoid the footer to overlap the remaining of the content. IE6 which doesn't know min-height just works fine with height, so you'll need to add a * html hack for this.All with all, here's an SSCCE, just copy'n'paste'n'run it:
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<title>SO question 1900813</title>
<style>
html, body {
margin: 0;
height: 100%;
}
p, div {
margin-top: 0; /* Fix margin collapsing behaviour in FF. Use padding-top if necessary. */
}
#container {
position: relative;
min-height: 100%;
}
* html #container {
height: 100%; /* This is actually "min-height" for IE6 and older. */
}
#pushfooter {
height: 50px; /* Must be the same as footer height. */
}
#footer {
position: absolute;
bottom: 0;
height: 50px;
}
</style>
</head>
<body>
<div id="container">
<p>Some content</p>
<div id="pushfooter"></div>
<div id="footer">Footer</div>
</div>
</body>
</html>
Edit: after more testing I realized that this indeed does not work in IE8 (I still consider it as a beta so I didn't really use/test it, sorry about that), unless you let it render in IE7 compatibility modus (insert sad smilie here) by adding the following meta tag to the <head> (which I already added to the SSCCE here above):
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
or to let it render in quirks mode by using a "wrong" doctype (either remove the <!doctype> or pick one of the doctypes associated with painfully red Q boxes in IE here). But I wouldn't do that, that has more negative side-effects as well.
And, surprisingly, the http://www.cssstickyfooter.com site as someone else here mentioned here which used an entirely different approach also did not work in IE8 here (try to resize browser window in y-axis, the footer won't move along it as opposed to other browsers, including IE6/7). That browser keeps astonishing me. Really.
37
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
