css left right column fixed

Question

im working on a 3 column webpage. i would like to freeze the left n right column. i tried setting to position:fixed on the left column first but everything other div just crash to the left.

any idea??

Answer 1

position:fixed takes the element out of the normal "flow" of elements. I typically circumvent this by setting margin-left of the middle column to be equal to the width of the left column plus the desired gutter. For example, if the left column is 250px and the gutter is 25px then the margin-left of the middle column would be 275px.

Sample code (this keeps the middle column fluid in width):

#wrapper { position: relative; min-width: 800px; max-width: 1000px; margin-left: auto; margin-right: auto; }
#left-col { position: absolute; top: 0; left: 0; width: 250px; }
#right-col { position: absolute; top: 0; right: 0; width: 250px; }
#middle-col { position: relative; margin-left: 275px; min-width: 250px; max-width: 450px; }

<div id="wrapper">
    <div id="left-col"> left </div>
    <div id="middle-col"> middle </div>
    <div id="right-col"> right </div>
</div>

Answer 2

You need to set margin on the center div to keep the space for the other two.

Here is a jsfiddle: http://jsfiddle.net/pfxxL/

#left {
    width: 100px;
    position: fixed;
    top: 0;
    left: 0;
    background: red;
}

#right {
    width: 100px;
    position: fixed;
    top: 0;
    right: 0;
    background: blue;
}

#center {
    margin-left: 100px;
    margin-right: 100px;
    height: 750px;
    background: green;
}

<div id="left">
    left left<br/>
    left left<br/>
    left left<br/>
</div>
<div id="center">
    center
</div>
<div id="right">
    right right<br/>
    right right<br/>
    right right<br/>
</div>