Three Column OverFlow Layout - css

Question

I'm looking for some help with my CSS layout. I can't seem to get it how i want. Here is an image of what i am looking for.
Required Layout Image
I can't get div2 to fill its' section with the overflow being visible to the bottom of the left column.
Here is my code that i am using to show where i am at. Please some help would be great! I'm looking to target IE6+
body {
margin: 0;
padding: 0;
height: 100%;
overflow: auto;
}
.leftContent {
position: absolute;
left: 0;
top: 0;
padding: 0;
width: 250px;
height: 100%;
color: #333;
border: red ridge;
background: blue;
overflow: hidden;
}
.centreContent {
margin-left: 254px;
margin-right: 1px;
margin-bottom: 20px;
color: #333;
background: green;
border: red ridge;
padding: 0 0px;
height: 100%;
}
.rightContent {
position: absolute;
right: 20;
top: 0;
padding: 0;
width: 100px;
color: #333;
background: black;
border: red ridge;
}
.div1 {
border: black solid;
}
.div2 {
overflow: auto;
height: 100%;
border: black solid;
}
<!-- Start Left Column-->
<div id="leftColumn" class="leftContent">
<div id="div1" class="div1">
CONTENT
</div>
<div id="div2" class="div2">
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT
</div>
</div>
<!-- End Left Column-->
<!-- Start Centre Column-->
<div id="centreColumn" class="centreContent">
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
</div>
<!-- End Centre Column-->
<!-- Start Right Column-->
<div id="rightColumn" class="rightContent">
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
</div>
<!-- End Right Column-->
Thanks for your help.

Answer 1

Why you're using "position: absolute ?
Remove position, left, right bla bla and
.leftContent { float:left;}
.centreContent {float:left;}
.rightContent {float:right;}
use this CSS Codes...