Myself, Coding, Ranting, and Madness

The Consciousness Stream Continues…

CSS-only Bottom Bar

1 Nov 2010 8:00 Tags: None

Well, here's a little thing which finally clicked in my mind a few weeks ago: lots of websites, for one reason or another, have some kind of bar which is affixed to the bottom of the page. Look, for example, at facebook - they've got the little char bar which sticks to the bottom of the page. Back in the days when heathen coders still walked the Earth1, it was done using interesting positioning scripts and a lot of black magic. Then people began to discover the wonderful world of the other CSS positioning modes (relative, absolute, and fixed). However, there were still a lot of problems: absolute doesn't scroll with the page, so it's right out. Fixed does scroll, but getting it to stick to the bottom was always a challenge - you generally had to set the offset from the top of the page, requiring you to work out the window height, and subtract the height of the bar, remembering that each browser used slightly different values (based on whether the renderer used the padding-box, margin-box, or border-box to handle these sorts of things).

Now, it's easy. Really, really easy: <div style="position: fixed; bottom: 0;">CONTENT!</div> It's been tested in the current versions of Chrome, Firefox, Opera, and IE9 (Including all of IE9's emulation modes). The only one of these that doesn't work at all is IE in quirks mode, a thing which shouldn't be encouraged in the first place. Safari should work as well, being based on the same rendering as Chrome.

On a partially related note, the developer tools in IE are finally up to scratch. They might not quite match the webkit developer console yet, but it's looking pretty nifty. Now, if Mozilla get their act together and sort Gecko out, we might actually have a world-wide-web of useful browsers2.

  1. Well, they still do. Thankfully, there're less of them. Plus Starcraft II probably still has many of them out of commission.
  2. I refuse to be sorry for this line.