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
