Creating vertical space in CSS

So, I've got a box in the center of t开发者_JAVA百科he 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.

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;
}