css left right column fixed

im working on a 3 column webpage. i would like 开发者_如何学Pythonto 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??

---

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>

---

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>