CODEWITHSUNDEEP
css
chrizonline
chrizonline

Reputation: 4979

css left right column fixed

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??

Upvotes: 3

Views: 8496

Answers (2)

T. Stone
T. Stone

Reputation: 19495

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>

Upvotes: 5

Bazzz
Bazzz

Reputation: 26932

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>

Upvotes: 2

Related Questions