3-column divs with dynamic middle - right div dropping down - html

Question

Started a project involving a 3-column div at the top - 300px/dynamic/350px. The right div falls below the others: http://jsfiddle.net/tspencer103/b49mfno4/1/.
I have tries several suggestions here like http://jsfiddle.net/22YBU/. No luck. Any suggestions? Thanks.
div #div_1 {
float: left;
height: 50px;
background-color: red;
width: 300px;
}
div #div_2 {
height: 50px;
margin: 0px 350px 0px 300px;
background-color: green;
text-align: center;
}
div #div_3 {
float: right;
height: 50px;
background-color: blue;
width: 350px;
}
<div id="container">
<div id="div_1">LEFT STATIC 300px</div>
<div id="div_2">CENTER DYNAMIC</div>
<div id="div_3">RIGHT STATIC 350px</div>
</div>

Answer 1

If you're interested in a simple, more modern approach, drop the floats and use flexbox:
HTML (no changes)
<div id="container">
<div id="div_1">LEFT STATIC 300px</div>
<div id="div_2">CENTER DYNAMIC</div>
<div id="div_3">RIGHT STATIC 350px</div>
</div>
CSS
#container {
display: flex;
}
#div_1 {
background-color: red;
width: 300px;
height: 50px;
}
#div_2 {
background-color: green;
text-align: center;
height: 50px;
flex: 1; /* flexible width */
}
#div_3 {
background-color: blue;
width: 350px;
height: 50px;
}
DEMO
Flexbox benefits:
minimal code; very efficient
centering, both vertically and horizontally, is simple and easy
equal height columns are simple and easy
multiple options for aligning elements
it's responsive
unlike floats, which offer limited layout capacity because they were never intended for building layouts, flexbox is a modern (CSS3) technique with a broad range of options.
Note that flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, post your CSS in the left panel here: Autoprefixer.