How do you select half the remaining width using css?

Question

I want to have three columns, a middle column of 1000 pixels in the center of the page, and then a left and right column that occupies the remaining width.

Basically I want something similar to this:

If the shell is 1000px and two side spaces are half of the remaining total space.

Answer 1

You can easily center an element using margin: 0px auto . This will leave space to the left and right of the item. If the element is inside another, which occupies the entire width, then the background can be placed and centered inside it.

An example could be:

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

Then CSS will look like this:

 #container { width: 100%; /* Background properties go here. */ } #content { margin: 0px auto; width: 1000px; } 

It is not possible to put content in both directions from the #content div.

Answer 2

For a clean CSS approach, try something like http://jsfiddle.net/hKB9T/2/ (don't forget to expand your browser window so that the "results" field is ~ 1200 pixels wide or so)

it is not complete (depending on your requirements, you may need to stroke the position of the .center element), but it should put you on the correct 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 let's say your page width is 1024 pixels wide. 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;}