Трехколонный макет переполнения

Question

Мне нужна помощь с моим макетом CSS. Я не могу понять, как я хочу. Вот изображение того, что я ищу.

Требуется макет изображения

Я не могу заставить div2 заполнить его раздел с переполнением, видимым в нижней части левой колонки Вот мой код, который я использую, чтобы показать, где я нахожусь. Пожалуйста, некоторая помощь будет отличной! Я ищу цель 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-->

Спасибо за вашу помощь.

Answer 1

Почему вы используете "положение: абсолютное?" Снять положение, слева, справа, бла бла и

.leftContent { float:left;}
.centreContent  {float:left;}
.rightContent {float:right;}

используйте эти CSS-коды ...