CODEWITHSUNDEEP
cssposition
Michael roshdy
Michael roshdy

Reputation: 57

create three column, two of them fixed position

jsfiddle I have three columns, but i want the right and the left column, fixed position, when i scroll the page these columns comes with scrolling, my problem is, i can't make both of them fixed in their position, and i have another issue with i18n, that when i change from rtl to ltr.

css

    body{
    background:#fff;    
    margin:0px auto 0px auto ;
    padding:0px auto 0px auto ;

}
html{
    background:#fff;    
    margin:0px auto 0px auto ;
    padding:0px auto 0px auto ;
}

.inner-page{
    margin:0px auto 0px auto;
    padding:0px auto 0px auto;
    position: relative;
}
.inner-navbar{
    margin:0px auto 0px auto;
    padding:0px auto 0px auto;
    width:1000px;
}
.inner-page-right{
    background: #000; 
    width:200px;
    min-height:1000px;
            color:#fff;
            float:right
}
.inner-page-center{
    width:600px;
    min-height:1000px;
            float:right
}
.inner-page-left{
    background: #000; 
    width:200px;
    min-height:1000px;
            color:#fff;
            float:left
}
.inner-page-center-up{
    height:50px;
}
.inner-page-center-down{
    background-color:#e6e6e6;
    border:1px solid #cccccc;   
}

and Html 

<div class="inner-page inner-navbar">
    <div class="inner-page-right" >
        column right
    </div><!--inner-page-big-right_right-->
    <div class="inner-page-center">
            column center
    </div><!--inner-page-big-right_right-->
    <div class="inner-page-left">
        column left
    </div><!--inner-page-big-left-->
</div><!--inner-page-->

Upvotes: 0

Views: 1811

Answers (2)

3dgoo
3dgoo

Reputation: 15794

You can fix the left and right columns using position: fixed. We place them in the correct position by placing them in the centre with right: 50% / left: 50% and then shifting them across by half the width of the container with margin-right: -500px / margin-left: -500px:

CSS

.inner-page-right {
    ...
    position: fixed;
    top: 0;
    right: 50%;
    margin-right: -500px;
}
.inner-page-left {
    ...
    position: fixed;
    top: 0;
    left: 50%;
    margin-left: -500px;
}

Demo

Upvotes: 1

Jean-Georges
Jean-Georges

Reputation: 688

I don't think this can be done with pure css. You could set your two in absolute position and update their top value using a javascript scroll event to keep them always on top of your navigator.

Upvotes: 0

Related Questions