Медная поляна

Делая очередной шаблон для Maxsite CMS, столкнулся с любопытной ситуацией.

Оригинал-макет состоял из 3 блоков, включая средний, обведенный в рамку.

Макет: центральная колонка выше сайдбаров

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

Макет: сайдбары выше центральной колонки

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

Но прежде чем привести код и разобраться в деталях, небольшое отступление о механизме, обеспечивающем нужный результат.

Представьте, имеется блок, которому определено свойство float (отличное от none), а внутри него, например, еще два плавающих блочных элемента. Какова будет высота внешнего блока? Все просто – он полностью вместит в себя нашу парочку и его вертикальный размер будет в точности равен высоте одного из дочерних элементов. Разумеется, ширина блоков не должна быть забыта.

Пример: float внутри float

В случае, когда свойство float контейнеру не задано, такого же эффекта можно добиться, если указать ему {overflow: hidden;} или сразу после внутренних блоков добавить «чистильщика» вроде <div style="clear: both;"></div> .

Теперь вариация на заданную тему.

HTML:

<div class="wrapper">
    <div class="wrap-in">
        <div class="page">Lorem ipsum</div>
        <div class="sidebar-left">Lorem ipsum</div>
        <div class="sidebar-right">Lorem ipsum</div>
        <div class="clear"></div>        
    </div>
</div>

и CSS:

.wrapper {width:90%; margin:0 auto;}
.wrap-in {width: 60%; margin: 0 auto; border: 1px solid black; background: #c0c0c0;}
.page {float: left; width: 100%; margin-right: -100%;}
.sidebar-left {position: relative; left: -34%; float: left; width: 33%; background: #4682b4;}
.sidebar-right {position: relative; left: 34%; float: right;  width: 33%; background: #82b346;}
.clear {clear: both;}

Взгляните на готовую конструкцию.

Рамочный контейнер .wrap-in всегда будет принимать высоту одного из своих потомков, поскольку все они сделаны «плавающими». Чтобы боковые колонки не путались под ногами они выведены за границы .wrap-in с помощью относительного позиционирования. Отрицательное правое поле у центральной страницы .page позволяет сайдбарам не заметить ее ширины и подтянуться максимально вверх. Дополнительная обертка .wrapper просто присутствует, обозначая границы в целом. Ее потеря сути не меняет; но не внешнего вида.

Проблем со ссылками-якорями нет, контент в HTML-файле идет первым, поддержка фиксированной или процентной ширины. Браузеры: IE 6+, Fx 3+, Safari 3+ (Win), Opera 9.6+, Google Chrome 2+, хотя насчет шестого даже тут нельзя быть уверенным. Осел, подлец, может подложить свинью, когда ее совсем не ждешь.

Задача, озвученная в начале поста решена, но пищи для размышлений прибавилось. А не замахнуться ли вам на 3-колоночный макет с «честными» колонками равной высоты?

Скачать (css во внешнем файле): 3-col-centr-border.zip 122