html div with text on top and bottom

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

Answer 2

You can't do this with one single block of text, as you're talking about two separate bits of styling (ie one bit to the top and one bit to the bottom), so you'll need to put the two bits of text into their own separate elements within the main <div>. eg

<div class='maindiv'>
    <div class='topofmaindiv'>This goes at the top</div>
    <div class='bottomofmaindiv'>This goes at the bottom</div>
</div>

Then you can style them using CSS to position the two inner divs at the top and bottom of the main div:

.maindiv {
    height:200px;
}
.topofmaindiv {
   position: relative;
   top:0px;
}
.bottomofmaindiv {
   position: relative;
   bottom:0px;
}

Obviously you will probably need to add other styles to that to suit your layout, but that should get you started.