Вёрстка « Проблема с float и clear

Всем привет!
В общем, такая проблема.

Есть три колонки: левая (left), правая (right) и средняя (center).
Первые две — плавающие. В средней, резиновой, вложен див content, который позиционируется по центру. В этом диве еще три дива — one, two и three. one и two — должны плавать, а three — не должен.
Проблема в том, что когда задаешь для дива three clear:both, то он падает ниже left и right, а не непосредственно под one и two.

Вот наглядный пример http://jsfiddle.net/wXyzX/

Как сделать, чтобы three позиционировалась сразу под one и two, не обращая внимания на left и right?

Спасибо!

1 ответов


для .content добавить overflow: hidden;
http://jsfiddle.net/RwKFQ/


Ваша проблема в том, что для внутренних блоков вы не создаете отдельного контекста форматирования и они находятся в том же контексте, что и внешние блоки. Что вам нужно сделать, чтобы решить вашу проблему - создать новый контекст форматирования, который будет содержать в себе лишь дочерние блоки. Вариантов создания нового контекста есть несколько - все они описаны, например, тут. Самым распространенным из них и самым подходящим вам будет способ, описанный выше камрадом @Fike.