Создание ширины таблицы заполнения td

У меня есть таблица с фиксированной высотой 50px и шириной 100%.

Внутри этой таблицы у меня есть два div, в одной строке, вот так:

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

Первый div имеет float:left, а второй имеет float:right.

Таким образом, таблица составляет 100% страницы. Я хочу, чтобы div2 обернул его содержимое, а div1 заполнил оставшееся пространство так, чтобы div2 выровнялся вправо следующим образом:

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

и что я в настоящее время получаю, когда div1 имеет меньше содержимого, чем полная строка:

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

Без стола я могу заставить его работать плавающим влево и вправо напрямую, но затем, когда они "соберутся", они будут оборачиваться друг под другом, а не рядом друг с другом.

РЕДАКТИРОВАТЬ: я добавил новый jsfiddle здесь. Это рабочий пример. Попробуйте удалить все ссылки, кроме одной, из левого div и посмотрите результат. Второе деление должно остаться в самом правом. Я надеюсь, что я объяснил себе.