主div两侧的div，填充了剩余的空间

Question

I'm having trouble wrapping my brain around this one.

How would I go about having a fixed width div, margin:auto, and then on both sides of that div have divs that adjusts their width automatically to fill the rest of space?

Thanks Appreciate any help

Answer 1

something like this without any container.

http://jsfiddle.net/JuG8W/

HTML

<div id="left">left</div>
<div id="middle">middle</div>
<div id="right">right</div>

CSS

#left{
   float:left;
   width: calc( 50% - 150px );
   background-color:blue;
}
#right{
    float:right;    
    width: calc( 50% - 150px );
    background-color:green;
}
#middle{
   float:left;
   width:300px; 
   margin:0 auto;
   background-color:red;
}

Answer 2

try this jsfiddle it uses simple display property to achieve this layout. It gives you consistent layout even if you scale the width to extreme minimum and you don't have to hard code anything except the width of the center <div> which you can also specify in % .

Update

First fiddle has center <div> width in % which makes it good for responsive design. This fiddle has center's width fixed (in pixels)