Three Column OverFlow Layout

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 {
  positi开发者_JS百科on: 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.

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...