Bottom Aligned Text in a Div

If you need to align the text of a div to the bottom of the containing block the following should help you out. First, we'll start with an example:

A link

The borders are there purely to show you what's happening. The way this works is the text is in an extra div, that is absolutely positioned to the bottom of the first div, this does mean that this method probably doesn't work for divs that have not got a specified height. Now for the code that generated the above:

<div class="container">
	<div class="text">
		<a href="bottomaligned.html">A link</a>
	</div>

</div>

And now the CSS

div.container {
	position: relative;
	height: 110px;
	width: 120px;
	border: dashed 1px red;
}

div.container div.text {
	position: absolute;
	bottom: 0px;
	border: solid 1px black;
}

And that's it, of course, with a little work, you can make some nice effects, say a menu across the top of your site with bottom aligned links to the various parts. That should be as easy as setting up all your divs and using

float: left;

on the container. (That was the original problem that drove this solution, thanks to mjj29 on #debian-uk for that challenge :-) ).

SommitRealWeird

Bottom Aligned Text in a Div