I had a lot of trouble with this one. I ended up figuring it out with CSS attributes I've never used before, although very simple and now I know I have to use said attributes more often.

What I'm wondering is if there's any way to clean this up a little more. Or if there's another way to do it...

Here's the jsfiddle if it's easier.. http://jsfiddle.net/jlnewnam/8MAsE/


Here's the HTML...

Code:
<div class="container">
	<div class="top">Top.</div>
    <div class="middle">Middle.</div>
    <div class="bottom">Bottom.</div>
</div>
And here's the CSS...

Code:
.container {
	width: 100px;
	height: 180px; 
	position: absolute;
	background: none;
	margin-top: 15px;
}

.top {
	width: 100px;
	height: 60px;
	position:absolute;
	top: 0;
	left: 0;
	background: #F00;
}

.middle {
	width: 100px;
	height: 60px;
	position: absolute;
	top: 60px;
	bottom: 60px;
	left: 0;
	background: #0F0;
}

.bottom {
	width: 100px;
	height: 60px;
	position:absolute;
	bottom: 0;
	left: 0;
	top: 120px;
	background: #FF0; 
}
I feel like it should have been easier than this, but to each their own.

Thanks in advance!