Данный метод использует рамки колонок и отрицательные отступы для формирования иллюзии равной высоты колонок.
HTML
Разметка HTML ничем не отличается от предыдущих методов:
<div id="container">
<div id="sidebar">
<p>Боковая панель</p>
</div>
<div id="content">
<p>Основное содержание</p>
</div>
</div>
CSS
А вот код CSS более интересен. Контейнер имеет фиксированную ширину и центрируется на странице. А свойства для элементов #sidebar и #content имеют интересные значения:
#container {
width:960px;
margin: 0 auto;
}
#content {
float:left;
width:700px;
border-left: 260px solid #555;
}
#sidebar {
float: left;
width:260px;
margin-right: -260px;
position: relative;
}
Все цвета, которые используются в данном методе, устанавливаются в свойствах элемента #content. Для него устанавливается фоновый цвет и задается ширина рамки равной ширине боковой панели. Цвет рамки используется тот, который предполагается для фона боковой панели.
Если остановиться в задании свойств сейчас, то мы увидим, что цвета для колонок выставляются правильно, но боковая панель выталкивается основным содержанием за рамки экрана. Поэтому ее нужно вернуть обратно.
Первым шагом задаем для правого отступа боковой панели отрицательное значение равное её ширине. Так она задвигается обратно на экран. Проблема теперь в порядке наложения элементов друг на друга. Элемент #sidebar располагается сверху. Чтобы вернуть боковую панель наверх, устанавливаем для нее свойство position: relative.
Плюсы:
1 Работает вне зависимости от того, какая колонка длиннее.
2 Просто установить.
3 Легко поддерживать.
Минусы:
1 Боковая панель должна иметь фиксированное значение ширины, так как свойство border-width воспринимает только абсолютные величины.
2 Отрицательные значения отступов могут не восприниматься в старых версиях IE.