Question

I have made a design with a fixed header and footer, with a liquid middle.

I have the middle in a margin, but the trouble is the scrollbar is not margined.

Here is what I have made:
http://jsfiddle.net/xXxV4/

As you can see, the scrollbar is tight to the header, footer and right side. I want it to have the content div with the 20px margin

Answer 1

Is this what you want?

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
    margin: 20px 0px 20px 0px; /* NEW */
}

So, the scrollbar gets a 20px margin as well.