Monthly Archives: December 2006

CSS Footer

This is a technique for creating a CSS footer that will snap to the bottom of the content or the bottom of the page, which ever is lower.  This all without any JavaScript. Download the code here.

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. 

There’s a bit of JavaScript goodies in there unrelated to the technique as well.  I can’t take credit for NoIEActivate.js, but I also can’t find it’s source either.  It’s great for avoiding the “click here to activate” in <object> and <embed> tags in IE, and doesn’t require any kind of “create a javascript file to source” garbage that plagues servers.

Rob

CSS – A Complete Journey

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.

Download the slides, the examples of positioning commands, and a JavaScript / CSS example I forgot to show here.

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.

Rob