Graham Edgecombe

Pains of vertical alignment in CSS

Vertical alignment in CSS was being a pain, and I spent a while searching as I wanted to align something vertically to the bottom of an element.

I then came across a forum post with an intruiging method of doing it.

If I had this HTML code:

<div id="container"> <div id="verticallyaligned"> Contents </div> </div>

Then this CSS code would align it to the bottom:


#container {
position: relative;
width: 200px;
height: 200px;
border: solid 1px black;
padding: 0;
}
#verticallyaligned {
position: absolute;
bottom: 0;
width: 200px;
margin: 0;
}


A pretty nice find. I just wish you didn't have to refer to these funny 'quirks' all the time, and something like vertical-align would work in more situations.