Need help with two column layout with sticky footer

HTML & CSS
1

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:

Desired:

2

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:


#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.

3

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.

4

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!