K-U-H-N.net

Recently, I had to find a way to place a line of text at the bottom of a block element without using any positioning whatsoever. (Overflow: hidden on a container made everything with position: absolute or relative sticky when scrolling).

Well here it is... works cross-browser including IE5.5. Untested in IE5 and IE/Mac, so I'd appreciate feedback on that.

The general concept relies on pushing a middle wrapper box (invisible) down under an outer container box (orange). An inner box (yellow) containing the text is then brought up using a negative margin of (roughly) the font-size. Font-size can be specified using relative values (i.e. em), so this should be fully scalable. It is also possible to add space at the bottom of the text, which might actually be a good idea as IE7 tends to cut off a tiny slice of below-baseline characters. For details please view the source.

Unlike my example below, you may want to choose a width large enough to hold the text, if the user increases the font-size.

It's not exactly pixel perfect (as line-heights vary across browsers) but it might work when nothing else does...

Feedback as always appreciated.