title: How to Create Automatically Expanding Block
body: <p>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.  </p>
  
  <p>Here's a bit of HTML to convey the idea:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="left"&gt;Left&lt;/div&gt;
    &lt;div class="center"&gt;Center center center center center center center&lt;/div&gt;
    &lt;div class="right"&gt;Right&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And some corresponding CSS:</p>
  
  <pre><code>.container {
    whitespace: nowrap;
  }
  
  .left {
    display: inline-block;
  }
  
  .center {
    display: inline-block;
    overflow: hidden;
  }
  
  .right {
    display: inline-block;
  }
  </code></pre>
  
  <p>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.  </p>
  
  <p>Something like center.width = container.width - left.width - right.width  </p>
  
  <p>Any ideas?  Thanks</p>
  
  <hr>
  
  <p><strong>EDIT:</strong> Solved with a few minor changes to <em>ianhirschfeld</em>'s response.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="left"&gt;Left&lt;/div&gt;  
    &lt;div class="right"&gt;RightRightRight&lt;/div&gt;  
    &lt;div class="center"&gt;Center center center center center center center&lt;/div&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.container {
    white-space: nowrap;
    overflow: hidden;
  }
  
  .left {
    float: left;
  }
  
  .center {
    overflow: hidden;
  }
  
  .right {
    float: right;
  }
  </code></pre>