How can I align text / image / links in a <div> grid from twitter bootstrap css?

Question

I am trying to use the CSS platform for the Twitter bootstrap, and so far there is only a grid layout inside it. Now I just want to align the contents of each cell of the <div> grid to the bottom. I'm obviously not a CSS buff.

This is html:

 <div class="container"> <div class="row"> <div class="span4"> <a href="index.php"><img src="someprettyhighimage.gif"/></a> </div> <div class="span8"> some text/links that need to be bottom aligned </div> </div </div> </div> 

I cannot find a way to make the second column <div> when the text (and / or the first) is aligned to the bottom.

Does anyone know the css magic I need for this? (Or also how would I do as a <div> aligned to the bottom?

Many thanks,

Sebastian

Answer 1

You need to set the position property of class = "row" div to relative, and then set the position property of the div containing the text to an absolute value, and the bottom property to 0.

 .row { position: relative; } .span8 { position: absolute; bottom: 0; } 

Check this out on jsfiddle:

http://jsfiddle.net/A8XE2/