How to Create Automatically Expanding Block

I need to create a one-lined 3-column layout. The left and right columns should each display one word without truncation (they should expand and contract to fit the word). The center column should display a potentially lengthy string, truncated to fit between the two columns.

Here's a bit of HTML to convey the idea:

<div class="container">
  <div class="left">Left</div>
  <div class="center">Center center center center center center center</div>
  <div class="right">Right</div>
</div>

And some corresponding CSS:

.container {
  whitespace: nowrap;
}

.left {
  display: inline-block;
}

.center {
  display: inline-block;
  overflow: hidden;
}

.right {
  display: inline-block;
}

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

Something like center.width = container.width - left.width - right.width

Any ideas? Thanks

EDIT: Solved with a few minor changes to ianhirschfeld's response.

HTML:

<div class="container">
  <div class="left">Left</div>  
  <div class="ri开发者_运维技巧ght">RightRightRight</div>  
  <div class="center">Center center center center center center center</div>
</div> 

CSS:

.container {
  white-space: nowrap;
  overflow: hidden;
}

.left {
  float: left;
}

.center {
  overflow: hidden;
}

.right {
  float: right;
}

Depending on how you are exactly implementing this, here is something you could try:

• Set the height on the container class
• Set float:left on .left and float:right on .right
• Place your .left and .right divs within your center div before its content

.container {
height: 30px;
overflow: hidden;
}
.left {
display: inline-block;
background: #b9ff67;
float: left;
}
.center {
width: 100%;
display: inline-block;
overfow: hidden;
background: #9ac0ff;
}
.right {
display: inline-block;
background: #ffc8c8;
float: right;
}

<div class="container">  
<div class="center">  
    <div class="left">Left</div>  
    <div class="right">RightRightRight</div>  
    Center center center center center center center  
</div>  

If I understand correctly, what you are looking for is this line:

.center { overflow: hidden; }

This HTML is fine:

<div class="container">
  <div class="left">Left</div>  
  <div class="right">RightRightRight</div>  
  <div class="center">Center center center center center center center</div>
</div> 

With overflow: alt text http://img638.imageshack.us/img638/755/withoverflow.png

Without overflow: alt text http://img638.imageshack.us/img638/2276/withoutoverflow.png

This resizes properly with the container and the window.

Try doing a search for the "Holy Grail" layout. It is kind of a classic CSS problem. You should be able to modify existing solutions to truncate text using the overflow property. Here's one such link:

http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm

One line, three columns, with adjusting width.........

Why not make it a table with three cells instead of using floated divs, then give the cells percentage width?

You should be able to get reasonably close to content fit with the side columns if you play around with the percentages.... for example 1% | 98% | 1% and going from there.