html - How to Create Automatically Expanding Block -

I need to create a one-line 3-column layout I left and right column each one without any type of word Should be displayed (they should expand and contract to fit the word). The center column should display a potentially long string, which is small to fit between two columns.

There is a bit of HTML to express this idea:

  & lt; Div class = "container" & gt; & Lt; Div class = "left" & gt; Left & lt; / Div & gt; & Lt; Div class = "center" & gt; Center Center Center Center Center & lt; / Div & gt; & Lt; Div class = "right" & gt; Right & lt; / Div & gt; & Lt; / Div & gt;  

and some related CSS:

 . Container {White spot: Abrop; }. Left {display: inline-block; }. Center {display: inline-block; Hidden flurry; } .right {display: inline-block; }  

The next step is to set the center element to either expand or contract itself to fill the space between the left and right elements.

Like some centers. Width = container.width - left.width - right.width

Any ideas? Thanks

---

Edit: Resolve with some minor changes in response to ianhirschfeld .

HTML:

  & lt; Div class = "container" & gt; & Lt; Div class = "left" & gt; Left & lt; / Div & gt; & Lt; Div class = "right" & gt; Rightright right & lt; / Div & gt; & Lt; Div class = "center" & gt; Center Center Center Center Center & lt; / Div & gt; & Lt; / Div & gt;  

CSS:

 . Container {White-Location: Abrop; Hidden flurry; }. Left {float: left; }. Center {overflow: hidden; } .right {float: right; }  

Depending on how you implement it, on You can try something:

• Set height on the container square
• Set float: left Left and float: right at right.
• Your

.container {height: 30px;
Overflow: Hidden;
}
balance {{display: inline-block;
Background: #B 9F-177;
float: left;
}
. Center {width: 100%;
Display: Inline-Block;
Overflow: Hidden;
Background: # 9ac0ff;
}
. Seal {
Display: Inline-Block;
Background: # FFC 8C8; Float: Correct;
}

  & lt; Div class = "container" & gt; & Lt; Div class = "center" & gt; & Lt; Div class = "left" & gt; Left & lt; / Div & gt; & Lt; Div class = "right" & gt; Rightright right & lt; / Div & gt; Center Center Center Center Center & lt; / Div & gt;