CODEWITHSUNDEEP
javascriptjquerycssstylesheethtml
HP.
HP.

Reputation: 19896

3 columns with third column having fluid width, fixed position

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 (i.e. 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.

Upvotes: 4

Views: 784

Answers (2)

Salman Arshad
Salman Arshad

Reputation: 272146

For absolute/fixed positioned elements, width is a function of left and right. So, set the 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

Upvotes: 2

charlietfl
charlietfl

Reputation: 171669

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/

Upvotes: 0

Related Questions