How to Create Automatically Expanding Block

Question

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="right">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;
}

Answer 1

I am sure some CSS guru knows how to do this without the use of javascript, but here is a sample page that should work.

http://jsbin.com/ivuyi

To show you how it will actually function with more data.

http://jsbin.com/ilari3/2

Answer 2

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

Answer 3

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>  

Answer 4

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.

Answer 5

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:

Without overflow:

This resizes properly with the container and the window.