title: Making a td fill table width
body: <p>I have a table that has a fixed height of 50px and 100% width.</p>
  
  <p>Inside that table I have two divs, on the same line, like this:</p>
  
  <pre><code>&lt;table&gt;
    &lt;tr&gt;
      &lt;td&gt;
        &lt;div id="1"&gt;&lt;/div&gt;
      &lt;/td&gt;
      &lt;td&gt;
        &lt;div id="2"&gt;&lt;/div&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>The first div has <code>float:left</code>, and the second has <code>float:right</code>.</p>
  
  <p>So the table is 100% of the page. I want div2 to wrap it's contents, and div1 to fill the remaining space so that div2 is aligned to the right like this:</p>
  
  <pre><code>+--------------------------------------------------------------+
  | [ DIV 1          (Expands)       ][ DIV 2 AND ITS CONTENTS ] |
  +--------------------------------------------------------------+
  </code></pre>
  
  <p>and what I currently get when div1 has less contents than a full line:</p>
  
  <pre><code>+--------------------------------------------------------------+
  | [ DIV 1 ][ DIV 2 ]                                           |
  +--------------------------------------------------------------+
  </code></pre>
  
  <p>Without a table I can get it to work floating left and right directly, but then when they "get together", they will wrap under each other instead of next to each other.</p>
  
  <p>EDIT: I've added a new jsfiddle <a href="http://jsfiddle.net/HRT5E/" rel="noreferrer">here</a>.
  This is the working example.
  Try removing all but one links from the left div, and see the result. The second div should stay at the most-right. I hope I explained myself.</p>