Обтекание блока другими блоками на CSS

Question

[fotov]

Добрый день!

Пожалуйста, помогите решить задачку средствами CSS, желательна максимальная совместимость (в т.ч. и с IE6).



Есть фиксированный блок меню слева, справа от него распологаются блоки-таблички. Если сверстать просто в две колонки — меню слева, таблицы справа, при прокрутке страницы далеко вниз останется белая полоса под меню. Хочется, чтобы блоки-таблички аккуратно обтекали блок меню, как на рисунке выше.

Есть ли элегантное решение этой проблемы без JS? Если точно нет — то с минимальным JS…

Comments

[max_rip]

А у блоков цвет бекграудна обязательный?

Answer 1

[Сергей]

Не совсем ясна задача. Меня — высоты контента? Блоки справа — тоже высоты контента и любого количества? И надо, чтобы высота меню подстраивалась под высоту блоков справа?
И высота уместившихся блоков справа меньше высоты меню, то меня вытягивается? Так что ли?

Comments

[Сергей]

Если все так, то пожалуйста (извиняйте, если jquery кривоват): jsfiddle.net/2KQwn/

[Сергей]

Поправил маленько: jsfiddle.net/2KQwn/1/

Answer 2

[tnz]

Может вот так? jsfiddle.net/qQSpJ/9/ Я не силен в верстке.

Comments

[Олег Торбасов]

Тогда ещё .rightBlock{overflow: hidden;}, поскольку поплавок не должен влезать внутрь блоков, как я понял.

[fotov]

увы, не получится — если внутри блока таблица, а не текст, то справа от меню вообще ни одного блока не будет

Answer 3

[IkaR49]

Я правильно понял? jsfiddle.net/qQSpJ/
Блоки справа имеют общий класс, как и требовалось, имена классов «block1» и «block2» просто, чтобы указать цвет блоков, они не влияют на результат. Единственное — последнему блоку придётся присвоить дополнительный класс «last», иначе не будет поддержки IE6. Чтобы отказаться от доп. класса «last», надо делать так:
jsfiddle.net/qQSpJ/1/
Но тогда кроссбраузерность упадёт.

Comments

[max_rip]

А вы высоты другие выставьте и получится не совсем красиво, текст в блоке которые будет переходным в конце меню, перепрыгнет под него, что уменьшит читаемость.