Html: Top And Bottom V-align In Same Container

Given this little piece. http://jsfiddle.net/4gb6K/7/ I am attempting to align the 'bot' element at the bottom while keeping the 'top' at top. I choose to draw up this little examp

Solution 1:

Like this: jsFiddle example.

Use positioning on all three elements. Relative on the container, and absolute on the inner divs.

CSS:

.outer {
    height: 600px;
    border: 1px solid black;
    position: relative;
}
.top{
    position: absolute;
    border: 1px solid black;
    top: 0;
}
.bot{
    border: 1px solid black;
    position:absolute;
    bottom:0;
}

Update: Here's a jsFiddle example using your other code example with the appropriate CSS.