How do you select half the remaining width using css?

Question

I want to have three columns, a 1000px middle column that is centered to the page and then a column on the left and right that takes up the remaining width.

I basically want something that looks like this:

Where the wrapper is 1000px and the two side spaces are half of the remaining total space.

Answer 1

You can easily centre an element with margin: 0px auto. This will leave a space on the left and right of the element. If the element is inside another which takes up the entire width, then a background can be placed and centred inside it.

An example might be:

<div id="container">
  <div id="content"></div>
</div>

Then the CSS would look like:

#container {
  width: 100%;
  /* Background properties go here. */
}

#content {
  margin: 0px auto;
  width: 1000px;
}

It wouldn't be possible to put content either side of the #content div.