No-nonsense sticky footers
Absolute positioning. It used to be all the rage back when we never had any problems with full-height columns because we could all use tables for layout, guilt-free. Ahh, those were the days.
These days fixed positioning is all the rage even though it doesn’t work on 90% of browsers, but, hey, we don’t care about that any more because we’re accessibility-compliant and we’re gracefully (and oxymoronically) degrading our sites or even, if we’re really of the Zeitgeist, progressively enhancing them. Honest.
But I’m not here to philosophise about the moral issues surrounding onclick(). I’m here merely to point out the CSS which might, just might (sorry, IE4 fans), allow you to put a big fat sticky footer on your website.
Firstly I’m assuming you’re using the common HTML ‘wrapper’ template:
<body> <div id="wrapper"> <div id="header"></div> <div id="content"></div> <div id="footer"></div> </div> </body>
The first step is to apply height: 100% to the body and wrapper elements, and give the wrapper min-height: 100% and height: auto:
html, body { height: 100%;} #wrapper { position: relative; min-height: 100%; height: auto !important; height: 100%; /* cunning IE hack */ }
Next, we absolutely position the footer at the bottom which, combined with the relative positioning of the wrapper, sticks it to the bottom of the page:
position: absolute; bottom: 0 !important; bottom: -1px; /* thanks IE */
You’ll probably want to apply a height to the footer div and add an equal size to the content div using padding-bottom. This will prevent any content from being hidden behind the footer.
And that as, they say, is that. Absolutely marvellous.
Tested in IE 5.01, IE 5.5, IE 6 and Firefox on the PC. Firefox, Opera, Camino and Safari on the Mac.
Posted by Olly on March 26, 2007 at 5:29 pm in css
| Permalink
Genius. Exactly what I needed — thank you!