CODEWITHSUNDEEP
htmlcss
mheavers
mheavers

Reputation: 30188

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

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?

Upvotes: 0

Views: 163

Answers (1)

DaniP
DaniP

Reputation: 38262

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

Upvotes: 1

Related Questions