Vertically align text to bottom within <div>

Soldato
Joined
20 Oct 2002
Posts
6,212
Location
UK
Hi,

I'm trying to get the link text within a div to sit at the bottom of the div...

I've created a square with a fixed width and height and want the text to sit on the bottom of the area... leaving blank space above.

So i've got

<div id="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
</ul>
</div>

style wise

#container ul li a{
width:100px;
height:100px;
vertical-align: bottom;
background-color: #999999;
}

Sorry its such a basic question but google doesnt seem to be helping me :p
 
<div style="position:relative; height:100px; width:100px;"><span style="position:absolute; bottom:0;"><a href="#">blah</a></span></div>

Something along the lines of this nasty inline code will work.
 
thanks,

i added

position:relative; - to the list item

&

position:absolute; - to the - list item anchor tag {
left: 3px;
bottom:3px;
}

worked a charm :-)

Thanks!
 
Back
Top Bottom