CSS - 3 divs, 1 with fixed size, others fill the space

Question

I have 3 divs on my web page horizontally next to eachother. Medium has a fixed size. I want the rest to fill in the remaining space on the page.

I made this snippet, which is a simplified version of my problem:

#left { background: red; float: left; } #middle { background: blue; margin-left: auto; margin-right: auto; width: 500px; } #right { background: green; float: right; } 

 <div id='right'>groen</div> <div id='left'>rood</div> <div id='middle'>fixed px blauw</div> 

I cannot use percentages because the middle div has a fixed size.

left and right div should have a width (100%-1170px)/2

Is there an easy way to make css fill in the extra space? Or, if this is not an option, is there a way to do this programmatically?

Answer 1

Demo - http://jsfiddle.net/mpsrcmgg/1/

You can use table layout display:table for parent and display:table-cell for children, but you will need to change the html markup

 .cont { display: table; width: 100%; } .cont div { display: table-cell; } #left { background: red; } #middle { background: blue; margin-left: auto; margin-right: auto; width: 500px; } #right { background: green; } 

 <div class="cont"> <div id='right'>groen</div> <div id='middle'>fixed px blauw</div> <div id='left'>rood</div> </div> 

Answer 2

Try using table hints:
HTML

 <div class="container"> <div id='right'>groen</div> <div id='middle'>fixed px blauw</div> <div id='left'>rood</div> </div> 

CSS

 .container{ display:table; width:100%; } .container>div{display:table-cell;} #left {background: red;} #middle { background: blue; width: 500px; } #right {background: green;} 

Demo

Answer 3

Try the following: CSS

 #left { background: red; float: left; width: calc(50% - 250px); /* <-- added this line */ } #middle { background: blue; margin-left: auto; margin-right: auto; width: 500px; } #right { background: green; float: right; width: calc(50% - 250px); /* <-- and this line */ } 

HTML

 <div id='right'>groen</div> <div id='left'>rood</div> <div id='middle'>fixed px blauw</div> 

Demo