Question

I need to create a <div> of height 200px that has some text at the very top and the very bottom. This needs to work in all major browsers. I’ve tried various combinations of alignment/vertical-alignment with no luck.

Answer 1

Use two spans (or whatever) inside the div:

<div>
     <span id="top">Text at top</span>
     <span id="bottom">Text at bottom</span>
</div>

Then give the div position: relative; and position the spans absolutely:

div {
    position: relative;
    height: 200px;
}

span {
    position: absolute;
}

span#top {
    top: 0;
}

span#bottom {
    bottom: 0;
}

Live example:

http://jsbin.com/ucowi3