footerStickAlt: A more robust method of positioning a footer
29 August 2005
Updated: 4:40PM, 29 August 2005 (See comment #6)
Recently I've been asked to code up a few sites that require the Web page footer to be positioned either at the bottom of the browser window or at the bottom of the Web page – whichever is visually lowest.
A quick search on Google immediately brought up solarDreamStudio's immensely helpful tutorial on how to do just this, and so I promptly implemented, with results achieved just as you see on the packet.
However, as my pages began to get a bit more complex, in one browser I began to see an intermittent bug. No, not Internet Explorer, but Firefox/Mozilla.
What happened was that when I viewed a page with a few images on it, Firefox would incorrectly position the footer on long pages (ones that scrolled below the bottom of the browser window). If you don't have Firefox handy, you can view a screenshot of the bug. However, this bug would only happen the first time I visited a page – any subsequent visits and the footer would be fine; until the cache had to be refreshed again (I presume – try clicking shift-refresh to reload the bug). This behaviour was just enough to make the method a no-go for me, and I reformulated the page design without a sticking footer.
A later project – whose design was out of my hands – absolutely required a sticking footer, so I had to once again delve back into the CSS code and figure out a solution. After a bit of experimentation, this is what I came up with.
Based off the original footerStick, footerStickAlt sets up the Web page so that it will span the entire height of the browser window, even if the content is less than the height of the browser window. However, where footerStick then used absolute "bottom" positioning to get the footer to appear at the bottom of the screen/content, footerStickAlt positions the footer outside the height of the content, and then applies a negative margin to get it to display inside the browser window.
So, where footerStick's code requires you to place the footer inside a containing element, footerStickAlt requires you to place it outside the element:
You then need to apply a bit of CSS:
* html #nonFooter
All of the styling on elements other than #footer are to get the height of the content area correct – the detailed explanation is available on solarDreamStudio's footerStick page. The main difference that footerStickAlt has is the style rules for #footer. It is positioned relatively to where it would normally be (underneath the content), and a negative margin moves it up into view.
In the case where the Web page's contents do not take up the entire browser window, the footer will naturally be positioned just below the bottom of the window. Once we specify a negative margin that is equal to the height of the footer, it will bring it back into view, with its bottom resting on the edge of the window.
For the case where the Web page content is larger than the browser window, the footer will be positioned naturally below the content, then brought up by the margin. For this scenario you should provide a bit of space at the bottom of your content which the footer can rise into without covering anything. This can be done with a bit of padding or margin on your content, as you can see in the CSS above.
The only drawback to footerStickAlt is that you must know the exact height of your footer (whether it be in absolute or relative pixels). However, you have to know this roughly with the original version anyway, in order to make room for the footer at the bottom of the content. It's generally a non-issue with footers anyway, as they have limited information and a sparse layout.
footerStickAlt has been tested and passed in Internet Explorer 5.01 for Windows, Internet Explorer 5.5 for Windows, Opera 7.51 for Windows, Opera 8.0 for Windows, Internet Explorer 6 for Windows, Firefox 1.04 for Windows, Firefox 1.02 for OSX & Safari 1.3 for OSX.
Thanks to solarDreamStudios for kicking me off on the right path.
Follow me on Twitter
To hear smaller but more regular stuff from me, follow @themaninblue.
- Resolution dependent layout update
- footerStickAlt: A more robust method of positioning a footer
- widgEditor: A simple, standards-compliant WYSIWYG HTML editor
- Accessible, stylish form layout