4

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.

Improve this question

2 Answers 2

Reset to default
2

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

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

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/

Improve this answer

2 Comments

I look at your code and don't see blue anywhere? Did I miss something?
yes.. you did same thing in display mode only. jsfiddle.net/Endt7/3/show

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.