Need help with two column layout with sticky footer

This is an example of a two-column layout with a sticky footer on Paul O'Brien's site:
http://www.pmob.co.uk/temp/2colfixedtest_4.htm

Currently the two columns on the page (div#left and div#centre-content) take up 100% of the available width.
Would it be possible to wrap these columns in a containing div, give this new div a width of, for example, 960px and center it?

I've been trying to do this all afternoon, but everything I tried just broke the layout.
Grateful for any help.

By way of illustration I have attached two images.

Current:

Attachment 60937

Desired:

Attachment 60938

Basically you will need to wrap #left , #centrecontent, and #clearfooter in a div and give that div a class ( i am calling it .center)

edit the the CSS accordingly:

Code:

---

#outer > .center {  background:orange;}
#outer > .center:before { content:""; position: absolute; left: -160px; right: 100%; border-left: 1px solid black;  border-right: 2px groove ; top:0; bottom:0; /*makes the boders*/}

#outer {
        min-height:100%;/*for mozilla as IE treats height as min-height anyway*/
        color: #000000;
        border-left:160px solid pink;
        border-right:1px solid #000;
        margin:0 auto;
        width:800px; 
        background: orange;
        position: relative;
}

---

That's it. hope that helps.

Oh wow. That's really great!! Thanks ever so much!

A second question:
Do you know how I would go about changing the column widths?
I would ideally like the left column to be 640px wide and the right column to be 320px.
I initially thought this would be simple, but my first attempts have produced quite rather bizarre results.

No, hang on, I got it! It's all good.
Thanks again for your help, if there was an up-vote button, I'd hit it!