title: How to place two divs side by side where one sized to fit and other takes up remaining space?
body: <p>This should be easy... why is this not easy? </p>
  
  <p>I am looking to have 2 divs side by side, where one div will auto size to the content inside and the second div will simply fill the remaining width.  I need the text in the 'remaining width' div to be truncated if it is too large though, as I can only have these divs occupy one line.</p>
  
  <p>I have been searching all day and the closest I found was <a href="https://stackoverflow.com/questions/2977872/css-two-divs-side-by-side-one-takes-up-as-much-room-as-need-other-fills-rest">this</a> post which suggested using tables that STILL didn't fix the issue.</p>
  
  <p>Here is the jsfiddle code that reproduces my issue: <a href="http://jsfiddle.net/ssawchenko/gMxWc/" rel="nofollow noreferrer">http://jsfiddle.net/ssawchenko/gMxWc/</a></p>
  
  <p>I am hoping that one of you stack-peeps can help me out!</p>
  
  <p><strong>=== CSS (Hacky) Solution? ===</strong></p>
  
  <p>Apparently adding a negative margin (that must guarantee to be big enough to cover the right size) will "work". This seems so hacky and <em>may</em> not fix the issue completely though.   If I drag the jsfiddle window side to side to shrink and grow the divs, some oddities occur where the shrink-to text seems to float not on the complete right.</p>
  
  <pre><code>.right_part 
  {
    margin-left:-1000px; 
    background:yellow;   
    float:right;
    white-space:nowrap;
  } 
  </code></pre>
  
  <p><strong>=== Complete CSS Solution ===</strong></p>
  
  <p>FINALLY found the right CSS combination!</p>
  
  <p><a href="http://jsfiddle.net/ssawchenko/gKnuY/" rel="nofollow noreferrer">http://jsfiddle.net/ssawchenko/gKnuY/</a></p>
  
  <p>My mistake was I was incorrectly floating my "fit to" content.  By moving the div to the correct location in the DOM the content is floated correctly, and the "remaining sized" div will now correctly take up the remaining space. </p>
  
  <p>I also wanted to force the divs to occupy ONE line, which is why I have set such strict CSS on the "remaining sized" div content.
      overflow:hidden;
      text-overflow:ellipsis;</p>