I learned the technique through “Google University” [read: I Googled it until I found an answer]. I wish I could give credit, but I’ve since misplaced the link I used. Thanks to whomever.
The technique involves creating an “everything but the footer” div, and setting it’s min-height to 100%. (For IE 6, set height to 100% — compensate for IE 6’s lack of support for min-height, and the fact that it auto-expands divs to fit content). Then you create a “footer” div as a sibling, and set margin-top to the height of the footer. Add a margin-bottom to the “everything else” div that matches, and you’ve got yourself a footer that stays at the bottom of the page.
Download the sample, and give it a spin.
I taught ‘CSS – A complete journey’ at the Arizona .NET Users’ Group last night. It was a blast! I can’t wait to teach again. In the CSS presentation, we started with zero CSS knowledge, and built up the basic commands and syntax, inclusion of CSS in a page, and the box model. From there, we dived head-first into positioning, comparing and contrasting float, position, and clear.
The thesis of the presentation was two-fold:
- For the CSS novice, you can take as much from CSS as you’d like. Start with styling fonts and colors, keep it simple, and CSS will be a valuable tool.
- For the advanced user, here are the specific positioning commands and their effects, some common techniques, and some gotchas. Use liberal virtualization and testing to insure your layout is durable.
We discussed a few other topics that’ll require additional work:
- You’ve asked for an example of a CSS footer, snapping to the bottom of the content or the page, which ever is bigger.
- Tim Heuer from Microsoft suggested that there’s now a supported mechanism for running IE 6 and 7 on the same box, a better technique then the Virtual PC commercial here. (Tim weighed in with this link to the post describing the Virtual PC commercial. No worries, Tim. I’ve eaten my words more times than I care to remember.)
- Other users suggested techniques they’ll email me about.
With each of these, I’ll post them as soon as I find / receive them. I look forward to your comments.