How to fix side bar and header using CSS for JS & jQuery Scroller

Question

I have this layout and I want to make the left sidebar, right sidebar and the header fixed.

enter image description here

This is my css :

    #container {
        padding-left: 200px;      /* LC fullwidth */
        padding-right: 190px;     /* RC fullwidth + CC padding */
    }

    #container .column {
        position: relative;
        float: left;
    }

    #center {
        padding: 10px 20px;       /* CC padding */
        width: 100%;
        overflow-x:hidden;
    }

    #left {
        width: 180px;             /* LC width */
        padding: 0 10px;          /* LC padding */
        right: 240px;             /* LC fullwidth + CC padding */
        margin-left: -100%;
    }

    #right {
        width: 130px;             /* RC width */
        padding: 0 10px;          /* RC padding */
        margin-right: -100%;
    }

    #footer {
        clear: both;
    }

& the code is here

After this step, I want to add nanScrollerJS to the right side bar.

I'm not familiar with CSS

That JSFiddle looks like your diagram to me. What is it that you want to change about it? — jamesplease, Dec 21 '12 at 18:22
For example, like facebook header, it's fixed when I scroll down :) — Ali Ben Messaoud, Dec 21 '12 at 18:31

score 2 · Answer 1 · answered Dec 21 '12 at 20:48

2

You can use position:fixed, but, of course, for IE you'll need some hacks to make it work.

answered Dec 21 '12 at 20:48

Adrian Ber

20,474
12
67
117

score 2 · Accepted Answer · answered Jul 10 '13 at 16:33

Is this what you were trying to do?

Fiddle

I've erased almost all of your code and replaced it with new code.

#fixed

position: fixed;
top: 0;
left: 0;
width: 100%;

#center

margin-top: 32px; /* Header height */
padding: 10px 20px; /* CC padding */
box-sizing: border-box;
border-left: 200px solid black; /* LC width including padding */
border-right: 150px solid black; /* RC width including padding */

#left

width: 180px; /* LC width */
padding: 0 10px; /* LC padding */
float: left;

#right

width: 130px; /* RC width */
padding: 0 10px; /* RC padding */
float: right;

#footer

position: relative;
z-index: 1;

score 0 · Answer 3 · answered Dec 21 '12 at 20:53

You could always just fix the center with an absolute height, and then overflow-y. Here's an example of what I mean:

#center {
        padding: 10px 20px;       /* CC padding */
        width: 100%;
        height: 240px;            
        overflow-y:scroll;        
        overflow-x:hidden;
    }

and here's a working example (based on yours): http://jsfiddle.net/nr2NZ/27/

Technically the example on nanScrollerJS uses a fixed div on the outside, however in this case, it could because if the outside boxes are position relative, i.e. shouldn't theoretically have an issue.

In that case, you're going to have to fix the outside positions, as Adrian suggested. The bigger problem you're going to have is IE rendering the overflow-y: scroll — Dabaz, Dec 21 '12 at 22:57