Making a td fill table width

Question

I have a table that has a fixed height of 50px and 100% width.

Inside that table I have two divs, on the same line, like this:

<table>   <tr>     <td>       <div id="1"></div>     </td>     <td>       <div id="2"></div>     </td>   </tr> </table> 

The first div has float:left, and the second has float:right.

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:

+--------------------------------------------------------------+ | [ DIV 1          (Expands)       ][ DIV 2 AND ITS CONTENTS ] | +--------------------------------------------------------------+ 

and what I currently get when div1 has less contents than a full line:

+--------------------------------------------------------------+ | [ DIV 1 ][ DIV 2 ]                                           | +--------------------------------------------------------------+ 

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.

EDIT: I've added a new jsfiddle here. 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.

Answer 1

Use the "colspan" property of td. Ex:

    <td colspan=75%> info </td> 

Answer 2

Solved adding the width:100% to the table.

http://jsfiddle.net/HRT5E/1/

table {     width:100%; }