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