Ваше благополучие зависит от ваших собственных решений.
Джон Рокфеллер

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;}

Position:relative(absolute); плюс Float

html-код и css продублированы на тестовой страницы.

Пример дополнен header и имеет сто процентную высоту, по html-коду и стилям прозрачен и легок в понимании и изучении.

Оставить комментарий.