how to have flexible height with fixed width

Question

1. The page has flexible width from 980px to 1200px
2. Has 3 columns
3. Left column is fixed width
4. Middle Column is flexible and large ( so all the extra width will go into this column)
5. Right column is fixed width

Problem

• Middle Column store a huge articles, however when left and right column is fixed width, it set the height of the whole page.

• Thus it trim the articles

• How to set the middle column as flexible height so that it shows the whole article??**

Sample Code

<div class="col_2">
</div>
<div class="col_1">
</div>
<div class="col_3">

.col_1{padding-left:230px; padding-right:259px;position:absolute; }
.col_2{width:210px; float:left;}
.col_3{width:210px; float:right; margin-right:10px;}

Answer 1

For a three-column, left/right fixed, center liquid layout, try:

CSS Three Column Liquid Layout by Mani Sheriar

Answer 2

You can try "The Holy Grail" from A List Apart. Its a three colum fixed left/right liquid centre layout.

Answer 3

I tried to follow the sample(CSS Three Column Liquid Layout by Mani Sheriar), but I still can't get it work...

<div class="content">
  <div class="box_content">
    <div id="col_2">
    </div>
    <div id="col_3">
    </div>
    <div id="col_1">
  </div>
</div>

.col_1
{
    padding:0 259px;
}
.col_2
{
    width:210px; 
    float:left;
}
.col_3
{
    width:210px; 
    float:right; 
    padding:10px;

}