title: Using text-overflow with element floated beside it
body: <p>I have three problems.</p>
  
  <ol>
  <li>The width for the left hand element needs to be defined such that the <code>text-overflow: ellipsis</code> will have effect</li>
  <li>The controls that are floated to the right are always visible on the line and not pushed down by the left hand element</li>
  <li>The container for this group of HTML is re-sizable so the size of article-title cannot be fixed. The controls will always be ~160px though.</li>
  </ol>
  
  <p>The container for this group of HTML is re-sizable. Dragging the result pane of <a href="http://jsfiddle.net/TPdch/" rel="nofollow">this fiddle</a> is exactly how it works in my current app.</p>
  
  <p>The CSS</p>
  
  <pre><code>.article-title {
      float: left;
      font-size: 18px;
      font-weight: bold;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 85%;
  }
  .pull-right {
      float: right;
  }
  .browse-issue {
      margin-right: 1ex;
  }
  </code></pre>
  
  <p>The HTML</p>
  
  <pre><code>&lt;span class="article-title" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a."&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a.&lt;/span&gt;
  &lt;div class="pull-right"&gt;
      &lt;button type="button" class="browse-issue btn" style=""&gt;Browse Issue&lt;/button&gt;
      &lt;button type="button" class="print btn"&gt;&lt;i class="icon-print"&gt;&lt;/i&gt;&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>