Совсем коротенька заметка. Был анонс вот, и сделаем доброе дело. Будет представлено три варианта. Речь пойдет о макетах сделанных с использованием относительного позиционирования, float и border-а.
Занимательные эксперименты с колонками равной высоты, где используется абсолютное позиционирование, подошли к своему логическому завершению.
О проблемах уже говорил, повторяться не буду.
Скажем так, свежий взгляд, позволил несколько иначе оценить цикл публикаций посвященных данной теме. И вывод не порадовал. Да интересно, да может быть кому-то и пригодится, но самое главное – нет в представленных решениях легкости, все очень жестко зафиксировано, есть резиновая область контента, а вот все остальное словно кирпич…
Примеры, как и обещано, имеют сто процентную высоту с включением header и footer, одинаковую высоту колонок, резиновую область контента - все браузеры, кроме IE6.
В качестве еще одного анонса:
Нет, это не таблицы. Настоящая, реально работающая web-страница в уменьшенном виде. Скриншоты отражают ее поведение.
Каждый контейнер имеет свою фоновую заливку, можно и графику размножить, свой индивидуальный border. Понятное дело - колонки одинаковой высоты. Про сто процентную высоту с header и footer тоже разговора нет. Расположение колонок, на любой вкус.
Только не задавайте вопрос, а зачем?
В личной переписке, как раз такую разметку и просят чаще всего.
В качестве вступительного экзамена верстальщику при приеме на работу.
Проиллюстрировал работу макета во всех популярных браузерах и вперед.
Конкурс, что ли устроить?
Ну, кто смелый?
html-код, центральная часть:
<body> <div id="middle"> <div class="content">Content </div> <div class="left">Left </div> <div class="right">Right </div> </div> </body>
Горизонтальный banner counters.php - width:494px;