Position:relative(absolute); плюс Float - колонки одинаковой высоты
Симбиоз перечисленных в заголовке стилевых правил, тут для полноты картины не хватает border-а, позволит, минимальными средствами получить нормально функционирующую web-страницу, не без недостатков конечно.
Их по сути два. Невозможность сделать footer на всю ширину макета, или хотя бы прикрутить его к центральной колонке и дать тому же макету окантовку в виде border-а.
Туда же можно и отнести отсутствие разделительных вертикальных линий (border), отделяющих область контента от боковых колонок.
Это собственно и есть все ограничения.
По моему мнению, наличие footer-а, важное, но не всегда обязательно условие. В некоторых случаях он и не нужен вовсе. Возможно, страница выглядит в этом случае несколько не привычно, но многие ли добираются до footer-а и уж понятное дело едва ли там находят, что-нибудь интересное и уж тем более, читают находящуюся в нем информацию.
Окантовка вокруг макета? Очень часто в ней тоже нет необходимости.
Вертикальные линии между контентной частью и колонками навигации, в общем-то, тут тоже на любителя.
html-код:
<div class="header">...</div> <div class="middle"> <div class="content">...</div> <div class="left">...</div> <div class="right">...</div> </div>
Простой, ясно читаемый html-код с минимумом css.
Иллюзию равной высоты колонок, тут она действительно, самая, что ни на есть иллюзия. Без особых на то усилий, боковые колонки можно сделать разной ширины.
Сто процентная высота макета, с включением header-а.
При известном желании, header можно довольно просто сбросить вниз по html-коду.
На мой взгляд, плюсы и минусы уравновешивают друг друга, и еще одна техника глобальной разметки web-страницы, никогда и никому не помешает.
Область контента ограничена по min/max-width.
css:
* {margin:0;padding:0;}
html,body {background-color:#aaa;height:100%;}
.header {
background-color:#9c9;position:relative;z-index:2;
margin:0 auto;min-width:910px;max-width:960px;height:100px;}
.middle {
margin:-100px auto;position:relative;min-width:510px;
max-width:560px;min-height:100%;
}
.middle:after {content: "";clear:both;display:block;}
*html .middle {width:560px;height:100%;}
*html .header {width:960px;}
.middle,.content {
background-color:#fff;
border-right:#cc9 200px solid;border-left:#a99 200px solid;
}
.content,.left,.right {margin-top:100px;overflow:hidden;}
.content {position:absolute;left:-200px;margin-right:-100%;width:100%;}
.left,.right {position:relative;width:200px;}
.left {float:left;left:-200px;}
.right {float:right;right:-200px;}
html-код и css продублированы на тестовой страницы.
Пример дополнен header и имеет сто процентную высоту, по html-коду и стилям прозрачен и легок в понимании и изучении.