Forum How do I...?

Issue with vertical-align:baseline

scottporad
I have a div containing several paragraphs of text that I would like to have bottom aligned on my page. I'm using this CSS:

html, body, div.dvDocument { 
	height: 100%; 
	background-color: #ff0000;
	vertical-align: baseline;
	text-align: right;
}


The height, background-color and text-align are all working as expected, however vertical-align is not. (Setting the value to 'middle' doesn't work either).

Ideas on what I'm doing wrong here?
mikeday
Unfortunately, the vertical-align property doesn't work like that for text in blocks. It can be used like that to vertically align the content of table cells, so you could change the div to a single table cell that fills the page. Alternatively, you could absolutely position the content of the div and specify "bottom: 0" so that the content of the div aligns with the bottom of the div, and hence the bottom of the page.