Чиним «прыгающие блоки» в IE6 простейшим способом

Заметки - Фишки CSS

Те, кто верстают под IE6, наверняка сталкивались с проблемой «прыгающих блоков», то есть с ситуацией, когда блоки с заданным float и шириной в процентах, при ресайзе браузера начинают то «сваливаться» друг под друга, то вставать на прежнее место. Классическая головная боль для тех, кто проектирует модульную сетку в процентах.

Проблема достаточна хорошо освещена в интернете. Например, в Техногрете студии Лебедва ее решению посвящены целых две статьи и один скринкаст. Не знаю кому как, а мне эти решения не по душе: некоторые из-за дополнительной разметки, некоторые — из-за хитровымученных стилей. Поэтому я предпочитаю использовать другое, состоящее всего из одной строчки. А вот, кстати, и оно:

<div class= left ></div>
<div class= right ></div>

<style type= text/css >
.left, .right {
float: left;
width: 50%;

/* внимание: */
clear: right;
}
</style>

* This source code was highlighted with Source Code Highlighter.

Рабочий пример (смотреть, разумеется, надо в IE6)

Женщины с планеты float, мужчины — с планеты clear.

Решение основано на глюке отличительной особенности браузеров IE5-7, которая выражается в том, что если блокам с float указать свойство clear с противоположным к float значением, то они перестают переноситься один под другой. Грубо говоря, блоки после такого просто «прилипают» друг к другу намертво и не «отлипнут» друг от друга уже ни при каких обстоятельствах.

Почему IE так поступает — это отдельный вопрос, на который у меня, к сожалению, нет ответа (кроме «it's а fucking magic»). Однако давайте подумаем, что это нам дает. Кроме приведенного выше фикса оно позволяет эмулировать некоторые аспекты неподдерживаемых в IE5-7 свойств display: table и table-cell. К примеру, можно создавать «резиновые» многоколоночные раскладки, которые не будут разваливаться или обрубать контент при переполнении.