title: How to force inline divs to stay on same line?
body: <p>I'm trying to make a three-column layout. I'd like the width of the left and right columns to be only as wide as their children content. I'd like the center column to expand to fill the remaining space.</p>
  
  <p>I'm trying the following (overview, jsfiddle link included below):</p>
  
  <pre><code>#colLeft {
    display: inline;
    float: left;
  }
  #colCenter {
    float: left;
    display: inline;
    overflow: none;
    white-space: nowrap;
  }
  #colRight {
    display: inline;
    float: right;
  }
  
  &lt;div id="parent" style="width:100%"&gt;
    &lt;div id="colLeft"&gt;left&lt;/div&gt;
    &lt;div id="colCenter"&gt;Some really long text in the center. Some really long text in the center.&lt;/div&gt;
    &lt;div id="colRight"&gt;right&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>fiddle:
  <a href="http://jsfiddle.net/5kszQ/" rel="noreferrer">http://jsfiddle.net/5kszQ/</a></p>
  
  <p>but the center column pushes the right column below it when its content is too long. I'd like all three columns to be inline, and have the center column shrink as necessary. This is what the above is giving me:</p>
  
  <p><img src="https://i.stack.imgur.com/IhI1G.png" alt="enter image description here"></p>
  
  <p>instead I would like:</p>
  
  <p><img src="https://i.stack.imgur.com/VfMuk.png" alt="enter image description here"></p>
  
  <p>Thanks for any help</p>