3容器响应页面宽度

Question

我一直在整天摆弄这个问题。我需要创建一个3列设计，其中中间div具有固定宽度，左/右div是动态的（响应页面宽度）。例如：

#container { 
float:left; 
width:100%; 
} 

#left { 
min-width: 200px; 
width: 100%; 
} 

#middle { 
width: 250px; 
} 

#right { 
min-width: 200px; 
width: 100%; 
} 

HTML：

<div id="container"> 
    <div id="left"> 
     Left column should expand with the width of the browser - with a min-width. 
    </div> 

    <div id="middle"> 
     Middle column with fixed width. 
    </div> 

    <div id="right"> 
     Right column should expand with the width of the browser - with a min-width. 
    </div> 
</div> 

我已经创造了这个小提琴：http://jsfiddle.net/2jGAe/ 你能不能帮我解决这个问题的造型？

Answer 1

的关键是使用：

#container > div { 
    display: table-cell; 
} 

与上#left和#right的div没有宽度。请参阅demo。