Problems with stretching center div between fixed width divs - css

Question

I have 3 divs inline. 2 of which have set px widths(outside divs). I want the center div to fill in all the space between the two outside divs when the window adjusts.
Here's an example of my attempt:
http://jsfiddle.net/3ZPHT
#div_1 {
float: left;
background: red;
display: inline-block;
width: 300px;
height: 50px;
text-align: left;}
#div_2 {
overflow: hidden;
background: green;
display: inline-block;
height: 50px;
text-align: center;
}
#div_3 {
float: right;
display: inline-block;
background: blue;
width: 350px;
text-decoration: underline;
font-weight: bold;
color: white;
height: 50px;
text-align: right;
}
Here's an idea of what I want it to look like:
http://jsfiddle.net/Q8eVz
Any help is very appreciated, thank you.

Answer 1

Demo: http://jsfiddle.net/3ZPHT/1/
HTML:
<div>
<div id="div_1">LEFT COL STATIC WIDTH 300px</div>
<div id="div_3">RIGHT COL STATIC WIDTH 350px</div>
<div id="div_2">CENTER COL DYNAMIC WIDTH</div>
</div>
CSS:
#div_1 {
float: left;
background: red;
display: inline-block;
width: 300px;
height: 50px;
text-align: left;}
#div_2 {
overflow: hidden;
background: green;
display: block;
height: 50px;
text-align: center;
}
#div_3 {
float: right;
display: inline-block;
background: blue;
width: 350px;
text-decoration: underline;
font-weight: bold;
color: white;
height: 50px;
text-align: right;
}