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:

Explanation

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

I think this needs to be done in javascript, the closest thing I can think of in CSS is `margin: 0 auto;` — Swift, Jul 13 '11 at 17:32
1000px for the middle leaves 12px for each sidebar on a lot of screens — blank, Jul 13 '11 at 17:32
they're not sidebars, just spaces. It is for a background image. — Yesterday, Jul 13 '11 at 17:33
takes up the remaining width of what? the width of the whole page content? ifso, what is that? or you want to put the two smaller divs inside of the 1000px centered box and have those 250px each? — LightningWrist, Jul 13 '11 at 17:34
You should definitely note that they are not sidebars in the question, as this is basically just "how do I center some content but not all content?" and should be answered accordingly. `margin:0 auto;` is your friend on this one. — Dereleased, Jul 13 '11 at 17:50
What happened to the table based approach answer? Or are we struck again by the "Tables are evil" Cliche! — Jawad, Jul 13 '11 at 17:55

score 4 · Accepted Answer · answered Jul 13 '11 at 17:40

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.

Wasn't originally going to upvote because this precludes using the side areas, but then the comments reflected that this was the intention, so you hit the nail on the head in the least complicated fashion. — Dereleased, Jul 13 '11 at 17:51

digitalbath · Answer 2 · 2011-07-13T17:53:09.920

For a pure CSS approach, try something like http://jsfiddle.net/hKB9T/2/ (make sure to widen your browser window so that the "results" box is ~1200px wide or so)

it isn't complete (depending on your requirements, you may need to fiddle with the position of the .center element) but it should put you on the right track.

<div id="page">
    <div class="center">center column</div>
    <div class="leftcol">
        <div class="inner">left column</div>
    </div>
    <div class="rightcol">
        <div class="inner">right column</div>
    </div>
</div>

and

.leftcol, .rightcol {
    width: 50%;
    float: left;
}
.leftcol .inner {
    margin-right: 500px;
    height: 200px;
}
.rightcol .inner {
    margin-left: 500px;
    height: 200px;
}
.center {
    width: 1000px;
    margin: 0 auto -200px auto;
    background-color: #eee; /* just for illustration */
}

Ah, you revised your question. @Drukles' answer is the easiest way to accomplish what you want. My answer is one way to go if you want to stick content in the gutters of your site. — digitalbath, Jul 13 '11 at 17:57

score -1 · Answer 3 · edited Jul 13 '11 at 17:43

-1

so lets say your "page width" is 1024px in width. I would do something like this --

html:

<div id="page_content">
  <div id="element_left">
  </div>
  <div id="centered_element">
  </div>
  <div id="element_right">
  </div>
</div>

css:

#page_content { width:1024px; margin:0px auto 0px auto;}
#element_left { width:12px; float:left;}
#element_right { width:12px; float:left;}
#centered_element { width:1000px; margin:0px auto 0px auto; float:left;}

edited Jul 13 '11 at 17:43

Dereleased

9,939
3
35
51

answered Jul 13 '11 at 17:40

LightningWrist

937
4
20
37

1

yes but what about when you move to a different monitor or resize the browser? – Yesterday Jul 13 '11 at 17:43
The elements would not fill the entire page. Moreover, I think your right element should be floating right? – Druckles Jul 13 '11 at 17:43

How do you select half the remaining width using css?

3 Answers3

Linked