Side panel div won't expand/decrease automatically along with main content - html

Question

I'm creating a complex website, which has quite a bit of code. So I created a JS Fiddle script that re-creates the problem I'm facing.
In short, we have a main container, and in the container is a left column floated to the left and the main content column flatting to the right.
As you can see in the example, the #sideColumn is not expanding to cover 100% of the height of the #container as the #mainColumn grows. The "blue" should automatically extent from the top (as shown) all the way to the bottom of the container as the #mainColumn grows/decrease. In other words, the #sideColumn should always equal the height of the container (automatically).
Here's the Fiddle - what am I doing wrong? http://jsfiddle.net/dLyfD/

Answer 1

Could do something like this:
HTML:
<div id="container">
<div id="sideColumn"></div>
<div id="mainColumn">
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</div>
</div>
CSS:
#container {
width:500px;
overflow:hidden;
border:1px solid #CCC;
position: relative;
}
#sideColumn {
padding:20px 0;
width:200px;
overflow:hidden;
background:blue;
position: absolute;
height: 100%;
}
#mainColumn {
padding:20px 0;
float:right;
width:300px;
background:yellow;
}
.test {
width:250px;
height:50px;
margin:15px 25px;
background:red;
}
http://jsfiddle.net/dLyfD/1/