How can I make a web page with fixed borders and a center area that scrolls?

Question

I need some help with how to make a web page. I hope somebody can help me.

What I would like is to have a page with a fixed border on all sides. For example a border of 50 pixels. I want the body of the page to be inside the border and for it to scroll when I move the browser window vertical scroll bar (located on the far right) and be hidden by the border.

Note I really want the scroll to be on the right hand side of the page and outside of the borders.

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxs
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxs
xx                                   xxs
xx                                   xxs
xx                                   xxs
xx                                   xxs
xx                                   xxs
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxs
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxs

Something like the above where xx is the border and s is the scroll bars.

Answer 1

You may start with that base : http://jsfiddle.net/8r99k/
I put sample text and only a few css :

html{
    margin:0;
    padding:0;
    width:calc(100% - 100px);
    height:calc(100% - 100px);
    border:solid #eeeeee 50px;
    overflow:hidden;
}
body{
    margin:0;
    padding:0;
    height:100%;
    overflow:auto;
}

Update
Adding width:100% and padding-right:70px to body
http://jsfiddle.net/8r99k/2/