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

Question

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

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

Где:

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

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

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

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

Answer 1

Это можно легко решить, добавив overflow: hidden 1003 * к #div_middle и удалив поля:

#div_middle {
    overflow: hidden;
    border:1px solid #0F0;
}

См .: http://jsfiddle.net/thirtydot/x3ESz/1/

Это работает во всех современных браузерах и IE7 +.

Answer 2

Работает даже с обеими боковыми панелями переменной ширины:

http://jsfiddle.net/QG2EU/

#div_left{
    float:left;
    border:1px solid #F00;
}
#div_middle {
    overflow: hidden;
    border:1px solid #0F0;
}
#div_right {
    float:right;
    border:1px solid #00F;
}

Answer 3

Вы можете исправить это без изменения макета, если используете этот скрипт:

$(document).ready(function() {
    $('#div_right').click(function() {
        $(this).append('--');
        $('#div_middle').css("margin-right", $('#div_right').width() + 2 +"px");
    });
});