Решение с полной поддержкой IE6 + . Я вытащу и объясню соответствующие биты кода.
Современная поддержка
div.content_columns {
width: 320px;
outline: 1px solid black;
background-color: gold;
text-align: center;
display: table-cell; /* No floats, this instead */
}
Итак, поскольку современные браузеры облегчают эту задачу, все, что нам нужно сделать, это использовать display: table-cell, чтобы заставить это работать. Делает столбцы равными по высоте и действует как ячейка таблицы. Легкий гороховый лимонный отжим.
IE 6 & 7 поддержка
<!--[if lte IE 7]>
<style>
div#content {
overflow: hidden;
}
div.content_columns {
vertical-align: top;
display: inline;
zoom:1;
padding-bottom: 9999px;
margin-bottom: -9999px;
}
</style>
<![endif]-->
Теперь для поддержки IE 6 и 7 мы собираемся использовать несколько приемов. Прежде всего, следует отметить, что это не нужно делать в условном комментарии, но мне это нравится больше. Чище для меня. Но вы можете использовать CSS-хаки, чтобы эти значения работали только в IE.
То, что мы делаем, это заставляем IE 6 и 7 обрабатывать каждый столбец как элемент inline-block, но, поскольку они не поддерживают (по крайней мере для элементов уровня блока), который мы используем inline дисплей и zoom: 1; исправление для запуска IE hasLayout свойство . Это будет относиться к нему, как будто это inline-block elmenent. Затем мы устанавливаем их все так, чтобы они были сверху друг над другом, и используем еще один маленький трюк. Мы используем padding: 9999px, чтобы расширить нижнюю часть элемента настолько, что другие элементы вряд ли будут длиннее его, и мы используем margin: -9999px;, чтобы не изменять рендеринг страницы, когда мы делаем это. Мы не хотим расширять страницу, просто фон. 9999px является произвольным и может принимать любое значение, если оно достаточно велико, чтобы превышать разницу между самым длинным и самым коротким столбцами. И для последних штрихов мы устанавливаем overflow: hidden на элемент контейнера, чтобы фоны не расширяли страницу, обливаясь снизу.
И у вас это есть, полная поддержка IE 6+ для многоколоночной разметки с фиксированной шириной с использованием чистого CSS 2 (плюс MS zoom).