Centered DIV w/ width dependant on text, buffered by two divs that should fill the containing DIV - css

Question

Thank you all for your help so far. I updated the description, concept image, and JSFiddle link to make things a little clearer.
I have been wracking my brains on this seemingly small issue the whole day. My web dev friends are baffled and I could not find a suitable answer in my search of this site and others (though, I could have missed it somewhere along the way).
Here's what I am trying to achieve:
3 non-fixed-width DIVs within one fixed-width container DIV
The center DIV needs to be centered, and no larger than the text it contains.
The left and right DIVs need to fill the remaining space in the container DIV.
Here are some links to help communicate this concept:
This is what I'd like to end up with
Check out this JSFiddle Link
The basic HTML:
<div id="container" >
<div id="left" ></div>
<div id="center" >Text inside center should resize this block</div>
<div id="right" ></div>
</div>
Below, I removed most of the styles I have tried. This CSS currently centers the DIV (if I set it as an inline block), but I need the other divs to fill the left and right space remaining:
#container {
width:750px;
text-align:center;
border:3px solid #E85355;
}
#left {
background-color:#A3CB46;
}
#center {
background-color:#6D6E71;
display:inline-block;
color:#FFFFFF;
}
#right {
background-color:#1DB0CE;
}
I've tried floating, no-wrap, overflow, etc. Thanks a million to whomever can offer some help!

Answer 1

Try the following CSS. It fills the width of the container...
#container {
width:764px;
text-align:center;
}
#container > div {
display: table-cell;
}
#center {
background-color:#CDD7D7;
}
#right, #left {
background-color:#E85355;
width:200px;
}
EDIT: display:table on container, not needed...

Answer 2

Do you need this ?
CSS
#container {
width:764px;
text-align:center;}
#left {
background-color:#E85355;
width:20px;
height:20px;
float:left;
}
#center {
background-color:#CDD7D7;
display:inline-block;}
#right {
background-color:#65A8A6;
width:20px;
height:20px;
float:right;
}
DEMO

Answer 3

Try this:
jsfiddle.net/SHnc9/36/

Answer 4

You can do it with flexbox! Demo: http://dabblet.com/gist/7187048
Markup
<div class='container'>
<div class='box left'></div>
<div class='box center'>enter text here to see this box grow!</div>
<div class='box right'></div>
</div>
CSS
.container {
display: flex;
}
.box {
flex-grow: 1;
}
.center {
flex-grow: 0; /* to get the box to wrap closely around the text */
}
According to caniuse.com http://caniuse.com/#search=flexbox, it's supported in all the major desktop browsers with firefox having partial support which probably means it uses the old syntax / doesn't support some new properties but the demo worked fine when I checked.
Just be sure to use prefixes(or use a prefixfree / unprefix plugin), add the old syntax for old browser versions (add old syntax below the new ones).
Also, use display: inline-block as a fallback.
You may also want to check out flexie.js http://flexiejs.com/.
Essential reading:
http://css-tricks.com/snippets/css/a-guide-to-flexbox/