css - center aligned 3 column layout with fixed width l&r columns, fluid center

Question

I have have a 3 column layout inside of a wrapper. The left and right columns have a fixed width: 180px. The center column is fluid between 640px and 960px. I'm using the calc method to calculate its width:

width: calc(100% - 360px);
max-width: 960px;
min-width: 640px;

But what I can't figure out is the CSS for the wrapper. How do I get the whole 3 column layout to align itself in the center of the browser?

Answer 1

You can do it this way:

#wrapper {
  margin:auto;
  max-width:1320px; /*960 + 360*/;
  min-width:1000px; /*640 + 360*/;
}

Check this demo http://jsfiddle.net/VTX4q/10/

_{I change the dimensions for a better visualization but is the base of what you can do just with your own values}

---