3 divs in container responsive to width of page

css, html

Solution

The key is to use :

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

with no width on the #left and #right divs. See demo.

Problem

I have been fiddling with this issue all day now. I need to create a 3 column design where the middle div has a fixed width and the left/right divs are dynamic (responsive to the width of page). For example: ``` #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> ``` I have created a fiddle for this: http://jsfiddle.net/2jGAe/ Can you help me solve this styling issue?

Original source