footerStickAlt revisited
Posted on Sat Mar 11 07:06:00 UTC 2006
Here’s the html used here
<html>
<body>
<div id="wrapper">
<div id="blog-header">
</div>
<div id="main-wrapper">
<div id="sidebar">
</div>
<div id="main-content">
</div>
</div>
<div id="main-bottom-space"> </div>
</div>
<div id="footer">
</div>
</body>
</html>
and the css used here:
body {
/* force footer to stick at bottom */
height: 100%;
}
/* avoid trampling on the footer by reserving some space (IE) */
#main-bottom-space {
height: 26px;
clear: both;
}
#wrapper {
position: relative;
/* force footer to stick at bottom */
height: 100%;
}
#main-wrapper {
position: relative;
}
#main-content {
float: left;
}
#sidebar {
float: right;
}
#footer {
clear: both;
/* stick at bottom */
height: 26px;
position: relative;
margin-top: -26px;
}
The key difference is to add the #main-bottom-space <div> element.
The only problem with this is that it doesn't work with xhtml. Add these lines to the top and you will see: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html>
Do you mean that to make this xhtml compliant, you need to add the proper DOCTYPE line? I believe this should work in most versions of xhtml 1.0, transitional, and even 1.1. Just realized that there is a semi-colon missing in the & nbsp ; entity in the example above (unless Markdown is playing funny with it.
Yes, adding the DOCTYPE and the xmlns to the html tag make it not work in Orpera or Netscape. IE seems fine though.
hmmm, I tried it with Firefox and IE, and I think I had tried it with Opera (I think it was 8). I'll try that again and see if I can figure out something. If anyone has a solution, don't hesitate to pitch in! I'm using it here with a <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> doctype. Arron, are you having problems with this site with Opera and Netscape?
Actually, I made a small test page using your code and tested it with Netscape, IE, and Opera. All 3 browsers worked fine until I added the doctype.
Have you been able to reproduce this behavior?
Sorry Arron, not yet. I'll try it today.
Arron, it appears that the missing bit it to have html { height: 100%; margin-bottom: 1px; } The margin-bottom: 1px is not critical for this, but is from [Force the rigth scroll bar to appear](http://blog.nanorails.com/articles/2006/03/11/forcing-the-right-scrollbar-to-appear-on-your-web-page) Adding this works wit Netscape 8.1, Opera 8.5, Firefor 1.5 and IE 6. I've added a page with a [working example](http://blog.nanorails.com/footerstickalt-revisited.html) It works with either <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> or <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Lesson learned: extracting an example from a full page does not necessarily work till you've tried it in all cases. Created a working snippet will serve you well in the long run.
I'm having problems with this in Safari. The footer tramples the content when broswer. Please help.
*when broswer resizes
Do you have problem with this page? It uses this technique and seems to work fine here. Or does this page http://blog.nanorails.com/footerstickalt-revisited.html work? These work for me with version 2.0.4 of safari. One of the key is to have that "main-bottom-space" section. Do you have a link with a page that displays the problem?
Thanks for the quick reply. I'm using Safari v1.3 here. I'll try and test my page on a newer version of Safari. Finally, I'll try and provide a link as soon as I can.