title: Fluid width with text-overflow ellipsis
body: <p>I'm trying to make inner div with fluid width and <code>...</code> when overflow (using <code>ellipsis</code>).</p>
  
  <p><strong>Requirements</strong>:</p>
  
  <ol>
  <li><code>.container</code> has fixed known width <code>200px</code></li>
  <li><code>.badge</code> could be any width but max is <code>30px</code>. This is because this div contains a number (from 0 to 999). This must stay <code>right</code> (float right).</li>
  <li><code>.content</code> and <code>.badge</code> must be in same line</li>
  <li><code>.content</code> will have ellipsis and nowrap. Must stay <code>left</code></li>
  <li>Key important: <strong><code>.content</code>'s width = <code>.container</code>'s width - <code>.badge</code>'s width</strong></li>
  </ol>
  
  <p>I could not get <code>#5</code> above to happen. Any pointer?</p>
  
  <p>My code below either made the <code>.badge</code> to wrap in second line or the <code>.content</code> just doesn't expand its width.</p>
  
  <p><strong>HTML</strong>:</p>
  
  <pre><code>&lt;div class=container&gt;
      &lt;div class=content&gt;
          Donec id elit non mi porta gravida at eget metus
      &lt;/div&gt;
      &lt;div class=badge&gt;
          5
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong>:</p>
  
  <pre><code>.container {
      width: 200px;
      background: gray;
  }
  
  .content {
      display: inline-block;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      max-width: 170px;
      background: green;
  }
  
  .badge {
      display: inline-block;
      max-width: 30px;
      background: yellow;
      float: right;
  }
  </code></pre>
  
  <p><strong>Link:</strong> <a href="http://jsfiddle.net/qhoc/4w6wR/1/" rel="nofollow">http://jsfiddle.net/qhoc/4w6wR/1/</a></p>