Как сделать резиновый див, между дивами фиксированой ширины с выпаданием их в колонку при сужении окна браузера?

Question

[Snitch]

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

Как такое можно реализовать? Или что-то подобное.

Answer 1

[Snitch]

Предложили так. В принципе самое то. Но как быть с ie<9?

Answer 2

[aen]

jsbin.com/EtiqIROn - для 1 и 2
media queries для 3 и 4

Comments

[Антон Щукин]

Ваш вариант для 1 и 2 взорвется, если в центральной части попытаться использовать сброс обтекания: jsbin.com/EtiqIROn/4/edit
(при верстке внутреннего контента, например)

[Антон Щукин]

Вот тут можно взять варианты для случаев с миксами резиновых и фиксированных колонок: blog.html.it/layoutgala

Answer 3

[Юрий Лобанов]

Да в общем-то тут все можно через media запросы сделать, меняйте css в зависимости от ширины экрана.

Answer 4

[Назар Мокринский]

Попробуйте display: flex (до свиданья IE9-) для размещения в строчку либо колонку и, естественно, media queries