How do you select half the remaining width using css? - html

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.

Answer 2

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 */
}

Answer 3

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;}