CSS - 3 div's , 1 with fixed size, others fill space

Question

I have 3 divs on my webpage horizontally next to eachother. The middle one is of fixed size. I want the others to fill up 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 can't use percentages, because of the middle div having fixed size.

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

Is there an easy way to make css fill up the extra space? Or if this isn't an option is there a way to do it 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>