Creating vertical space in CSS

Question

So, I've got a box in the center of the page (vertically and horizontally) with a fixed height (200px)

It contains two elements, of arbitrary height. I want one to be anchored to the top, and one to be anchored to the bottom of the box.

CSS3 is fine for this, so please use it if the stylesheet is clearer.

Answer 1

The html:

   <div id="outer">
        <div class="top">
        </div>

        <div class="bottom">
        </div>
    </div>

The styling:

#outer {
    width:100px; /* whatever */
    height: 200px;
    position:relative;
}

.top {
    position:absolute;
    top:0px;
}

.bottom {
    position:absolute;
    bottom:0px;
}