How can I get text to be vertically-aligned to the bottom and fill the empty space above it as needed?
My designer came up with the following design thing:
However I'm not entirely sure how to get the text to stick at the bottom like you can see in the middle. I thought I could do something like (inline css is for example only):
<div style="vertical-align: bottom; height:30px;"> <h2 style="line-height: 15px;font-size: 15px;padding: 0; margin:0;"> Foo bar foo </h2> </div>
Assuming you use two divs for each 'button', if you set the outer divs (the black bits) to be position: absolute or position: relative you can use bottom:0 on the inner div containing the text. This'll have the effect of aligning the text div at the bottom of it's parent. Note: You can't use the vertical-align property, as that only does what you expect if you're looking at a table-cell.