Данный метод также использует установки фона для контейнера. Несмотря на то, что метод псевдо колонок имеет ограниченное применение, он весьма прост и работает отлично.
HTML
Разметка используется такая же, как и в предыдущем методе:
<div id="container">
<div id="sidebar">
<p>Боковая панель</p>
</div>
<div id="content">
<p>Основное содержание</p>
</div>
</div>
CSS
Код CSS также весьма прост. В примере используется плавающая ширина колонок, но также можно использовать и фиксированные значения.
#container {
background: #555;
overflow: hidden
}
#content {
float:left;
width:75%;
background:#eee;
}
#sidebar {
float:left;
width:25%;
background:#555;
}
Мы установили фоновый цвет для элементов #content и #sidebar. Обязательно нужно устанавливать цвет для той колонки, которая предполагается быть самой длинной.
Основное отличие от метода фальшивых колонок заключается в использовании фонового цвета, вместо изображения. Принцип действия тот же - контейнер с фоном растягивается по высоте более высокой колонки, и формируется картина, на которой кажется, что все колонки имеют одинаковую высоту.
Ограничением является факт, что нужно знать, какая колонка окажется длиннее. Нужно будет добиваться того, чтобы она была самой длинной на всех страницах сайта. Звучит устрашающе, однако в действительности в большинстве случаев использования двух колонок, одна из них всегда имеет более короткое содержание.
Плюсы:
1 Легко реализовать.
2 Легко поддерживать.
Минусы:
1 Трудно реализовать для количества колонок более 2.
2 Требуется знание, какая колонка будет длиннее.
3 Не работает в шаблонах, когда на разных страницах одна и та же колонка оказывается то длиннее всех, то короче.