title: How do I keep CSS floats in one line?
body: <p>I want to have two items on the same line using <code>float: left</code> for the item on the left.</p>
  
  <p>I have no problems achieving this alone. The problem is, I want the two items to <strong>stay</strong> on the same line <em>even when you resize the browser very small</em>. You know... like how it was with tables.</p>
  
  <p>The goal is to keep the item on the right from wrapping <em>no matter what</em>.</p>
  
  <p>How to I tell the browser using CSS that I would rather <strong>stretch the containing <code>div</code></strong> than wrap it so the the <code>float: right;</code> div is below the <code>float: left;</code> <code>div</code>?</p>
  
  <p>what I want:</p>
  
  <pre><code>                                   \
   +---------------+  +------------------------/
   | float: left;  |  | float: right;          \
   |               |  |                        /
   |               |  |content stretching      \   Screen Edge
   |               |  |the div off the screen  /  &lt;---
   +---------------+  +------------------------\
                                               /
  </code></pre>