3列，第三列具有流体宽度，固定位置

Question

I would like to do this simple layout:

1. 3 columns with left and right position:fixed because when scroll down, left and right supposed to stay still
2. We know left column width = 200px
3. We know middle column width = 400px
4. We DON'T know right column width and it should be fluid (ie fill in rest of the screen width OR zero)

This is the sample I have (but with col3's width as 100px ). So the question is how to fix css of col3 to make it fluid but still reserve position:fixed ?

http://jsfiddle.net/Endt7/1/

My last alternative is to use jQuery. But I don't want to touch it unless really necessary for layout.

Thanks.

Answer 1

For absolute/fixed positioned elements, width is a function of left and right. So, set the left: 600px; right: 0; left: 600px; right: 0; on the third column and browser will determine the width. That is it. Here is the revised CSS, with few changes for consistency:

.col1 {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 200px;
    background: red;
}
.col2 {
    margin-left: 200px;
    width: 400px;
    height: 100%;
    background: green;
}
.col3 {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 600px;
    right: 0;
    background: blue;
}

Demo here

Answer 2

Can do it using float:left or absolute position for the left and middle columns and set margin-left equal to their combined widths.

.col1 {
    background: red;
    float:left;
    width: 200px;    
    height:100%
}

.col2 {
    background: green;    
    float:left;
    width: 400px;
    height:100%

}

.col3 {
    background: blue;
    margin-left:600px;

}

DEMO: http://jsfiddle.net/Endt7/3/