Geek asks and answers

Css left right column fixed

im works on a webpage with three columns. I would like to freeze the right right column. I tried to set the position: first fixed in the first column, but all other divs just crash to the left.

any idea?

+3
source share
2 answers

position:fixeddeduces an element from a normal "stream" of elements. I usually go around this by setting the margin-leftmiddle column equal to the width of the left column plus the desired gutter. For example, if the left column is 250px and the groove is 25px, then the margin-leftmiddle column will be 275px.

Sample code (this supports the width of the middle column 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>
+4
source

margin div, .

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>
+2

More articles:


All Articles