Трехколоночный макет CSS - фиксированная/максимальная/переменная ширина

У меня проблемы с работой следующего трехколоночного макета:

    A              B              C
+-------+-------------------+------------+
|       |                   |            |
| Fixed | Use unused space  |  Resizable |
|       |                   |            |
+-------+-------------------+------------+

Где:

• A - фиксированная ширина.
• B использует любое свободное пространство в контейнере, не используемое колонками A и C.
• C содержит содержимое, которое может изменить ширину и должно "подтолкнуть" B к другой ширине. другую ширину.

Вот моя лучшая попытка создать это: http://jsfiddle.net/x3ESz/

Все другие темы, которые я просмотрел, предлагают сделать все три плавающими, при этом B использует поля для предотвращения сворачивания, но это не позволяет C изменять размер B на основе содержимого C (так как для правого поля B должно быть задано значение).

Я также очень хочу избежать использования JS для достижения этой цели.