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

Question

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

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

Куда:

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

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

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

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

Answer 1

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

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

Смотрите: http://jsfiddle.net/thirtydot/x3ESz/1/

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

Answer 2

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

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

Answer 3

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

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;
}