Fixed content width with flexible (expandable) sidebar

Question

Instead of trying to explain this - which would be hard, I created an image - I am unable to create a layout in which: The sidebar is flexible and can expand to fill in the empty space that is not consumed by the contents of fiv, which has a fixed width of 725 pixels.

Look at the image, please :)

Answer 1

The small positioning of the witchcraft seems to fit your image: the right side has a fixed width of 200 pixels, the left side occupies the rest (but not less than 100 pixels).

#container { position: relative; min-width: 310px; } #container .left { background-color: blue; margin-right: 210px; height: 200px; } #container .content { float: right; background-color: green; width: 200px; height: 200px; position: absolute; top: 0; right: 0; } 

 <div id="container"> <div class="left">a</div> <div class="content">b</div> </div> 

Demo: http://jsfiddle.net/nzd2J/2/ . Move the vertical split panel to see how it scales.

Answer 2

I think this is what you need: http://jsfiddle.net/Shaz/GaZYt/1/

Html:

 <div id="contain"> <div id="left"> Left <br /> <br /> <br /> </div> <div id="right"> Right </div> </div> 

CSS

 #contain { width 100%; } #contain #left { min-width: 185px; width: 100%; border: 1px solid blue; display: table-cell; } #contain #right { min-width: 725px; border: 1px solid red; display: table-cell; }