Yet Another CSS Query: Vertically Aligning Text

Factual Questions
1

I want to position some text within a div, at the bottom. I’ve tried


{display: table-cell; vertical-align: bottom}

but that didn’t work.

I’ve prepared a JPG to showcase how it should be.

You’ll need to copy-paste the link onto your address bar.

http://lens.gyan.info/lf-sample.jpg

I’m referring to the text in the red & green header divs.

2

Getting things to align to the bottom with CSS is hellish, and essentially unreliable. No reason why this should be so, and in some browsers it will work just dandy, but most of the time it’s fristratingly unresponsive.

Your best bet is to use “align=bottom” with regular HTML.

3

The easiest/most reliable way I see to do it, is to use two <div>s, a container and a second, nested <div> to hold your bottom-aligned text. The outer <div> is positioned *relative * or *absolute * so that it becomes the containing block for the inner <div>, which is positioned absolutely. Like so:


<div style="position: relative; border: 1px solid black; height: 200px;">
Regular text goes up here.
	<div style="position: absolute; bottom: 0; left: 0;">
	Bottom-aligned text goes in here.
	</div>
</div>

I tested this quickly in IE6, Firebird 0.8, and Opera 7 (Windows versions), and it rendered identically across all three. The only disadvantage to this method is that you need to know the height of the containing block, otherwise the text outside the inner <div> will run right over top of the bottom-aligned text.

The JPEG of your initial method is down at the moment, so if the above method turns out to be unacceptable, perhaps you can provide us a little more information about your layout and we can suggest alternatives.