Сочетание фиксированных и резиновых блоков

[FRUTALITY]

Добрый день.

 

Возникла задачка, решение которой мне никак в голову не приходит. Точнее, я вижу решение с применением JS, но если можно сверстать без этого, то подскажите, как.

 

На схеме ниже указано, что нужно сверстать. Фиксированная ширина контейнера, в нем в одну строку располагаются несколько inline-block элементов. В данном случае, два элемента имеют фиксированную ширину, а два других — должны подстраиваться в зависимости от контента внутри.

 

Блок "2" содержит в себе контент разной ширины. По задумке, если контента в нем много, то блок "1" должен сужаться. Конечно, он не должен "схлопываться" (тут, я полагаю, достаточно выставить min-width), но главная проблема в том, что в сумме эти 4 блока всегда должны давать фиксированное значение по ширине. Накидал пример: cssdesk.com.

 

Можно что-нибудь сделать тут? Сохранив относительную кроссбраузерность (IE8+, да несколько свежих версий остальных браузеров).

[wwt]

Делаете 2 основных резиновых колонки 1 и 2. А у уже после этого в каждую колонку добавляете внутрь колонки с фиксированной шириной.

Что-то типо такого:

<div style="width:50%;">    <div style="width:200px;float:left;"></div></div><div style="width:50%;">    <div style="width:200px;float:left;"></div></div>

[FRUTALITY]

wwt, это не то, что мне нужно, если я все правильно понял. Вот, накидал примерчик по вашему совету: http://cssdesk.com/R3uf8

 

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

[Switch74]

table наверно нужно тут

[wwt]

Ну тогда да либо таблицы, либо блоки  c display: table

[FRUTALITY]

Switch74, благодарю. Как-то про таблицы я не подумал. Сделал пример с display:table. Если верить htmlbook, то это как раз относительно кроссбраузерный способ.

[sigma77]

Можно еще как-то так http://jsfiddle.net/47Mxq/

Но, наверное, табличное поведение будет пооптимальней.

[SelenIT]

Еще можно сделать через наложение фиксированных колонок поверх паддингов/бордеров резиновых (с бокс-сайзинг:бордер-бокс) отрицательными марджинами. А вообще пора флексбоксов на дворе…