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 the problem:

• 3 DIVS within one fixed-width container DIV
• The center DIV has text that will be different on other sites
• The center DIV needs to be centered, and no larger than the text it contains.

This is what I'd like to end up with

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;
}
#left {
  background-color:#E85355;
}
#center {
  background-color:#CDD7D7;
  display:inline-block;
}
#right {
  background-color:#65A8A6;
}

I've tried floating, no-wrap, overflow, etc. Thanks a million to whomever can offer some help!

JSFiddle Link