Two fixed width divs, and another div with dynamic size between

Question

The title says everything. I want something like this:

The left box should be positioned in the left, the right one in the right. They both should have fixed widths, e.g. 200px. The middle div should take the size between. Its width is not set, but it takes the width that's remaining.

Thanks.

Answer 1

Here's a working one.

Use margin: 0 auto; will get your element centered most of the time. (Quick note: your element must have a declared width for this to work.)

The margin: 0 auto; rule is shorthand for 0 top and bottom margin, and automatic left and right margins. Automatic left and right margins work together to push the element into the center of its container.

The margin: 0 auto; setting doesn't work perfectly in every centering situation, but it works in a whole lot of them.
reference: You Can't Float Center with CSS

HTML

<div class="leftsidebar">a</div>
<div class="rightsidebar">b</div>
<div class="content">c</div>

CSS

.leftsidebar 
{ 
height: 608px; 
width: 60px; 
background:red; 
float:left; } 

.rightsidebar 
{ 
background:blue; 
height: 608px; 
width: 163px; 
float:right; 
} 

.content 
{ 
width: auto; //or any width that you want
margin:0 auto;
background:yellow;
}