How to sandwich a content div between two fixed-width columns - css

Question

Take a look at this fiddle. I've got divs on either side, with fixed widths of 50px, and display:inline-block.
I want the div on the inside to expand to fill the gap between these two divs, but the problem is if I put lots of text inside this div it pushes itself onto the next line, and the layout breaks down.
Also, I want it so the middle div will fill the space even if there is a small amount of text in it (less than the page width).
How can I ensure the left and right divs are always on the left and right, and that the content div always fills the space in between them?
I tried using CSS3's calc, but it appears that it isn't very well supported.

Answer 1

This is the sort of situation that was handled in the past by using tables for layout. This will be fixed in the future by the new Flexbox implementation https://developer.mozilla.org/en-US/docs/CSS/Flexbox
In the meantime, you can emulate the table effect by using display: table-cell, this will cause each div to stretch the way you would expect a table to. If you want more control over the total width you can wrap it in a div that has a display: table-row and a set width.
.col {
background-color:#333;
color:#EEE;
width:50px;
display:table-cell;
}
.middle {
background-color:#EEE;
color:#333;
display:table-cell;
}

Answer 2

If you are open to using javascript, this will work:
​$(function(){
$('div.middle').width( $('div.container').width() - $('div.right.col').width() - $('div.left.col').width() - 10 );
$(window).resize(function() {
$('div.middle').width( $('div.container').width() - $('div.right.col').width() - $('div.left.col').width() - 10 );
});
});
Working JSFiddle:
http://jsfiddle.net/vh8Zu/