Легко изменяемый макет фиксированной ширины

Ещё один способ вёрстки макетов фиксированной ширины

Прогуливаясь по Internet в поисках неизвестно чего, я набрёл на статью годичной давности, в которой приводится рецепт по созданию легко изменяемого макета фиксированной ширины. Смысл был таков (авторская орфография и пунктуация сохранены): Создадим простейший трехколоночный шаблон, с блоками, фиксированной ширины. Блок контента расположим слева, а два колоночных блока помещаем справа от контента, один за другим. [...]

← Вернуться к полной версии записи «Легко изменяемый макет фиксированной ширины»…

Вложения:

(text/html)

Автор: Vladimir; опубликовано в: CSS, HTML; метки: CSS, HTML, XHTML, жесткий макет, макет, семантика

18
Мар
2008

Комментарии к статье «Легко изменяемый макет фиксированной ширины» (3) »

Анатолий

Апрель 25, 2008 в 10:38

(если необходимо разместить нижний колонтитул в нижней части экрана, то все колонки нужно завернуть еще в один . )(с)
Товарищи, Читайте книги Ростислава Чебыкина, и никогда у вас не будет проблем с закрепелнием подвала сайта, без всяких дополнительных “Дивов”

Ответить
Vladimir

Апрель 25, 2008 в 14:53

Видите ли, Анатолий, в теории оно всё хорошо. Но когда дело доходит до практики и когда требуется поддержка Internet Explorer 6, в реальности всё намного хуже.

Если Вы обратите внимание, то высота у макета составляет 100%, при этом ни одна из колонок не завернута в контейнер (роль контейнера выполняет <body>). Проблема в том, что когда высота контента каждой из колонок заранее неизвестна (то есть нельзя определить, какая из колонок будет длиннее), а также неизвестна высота окна (viewport), без лишнего <div> будет очень трудно. Если задать padding-bottom у контейнера с колонками, чтобы разместить в нем подвал (как оно обычно и делается), то возникает проблема с W3C box model, ибо в height: 100% padding-bottom уже не входит. То есть при стопроцентной высоте и таким решением всегда будем получать вертикальную прокрутку (и overflow: hidden здесь не выход).

В любом случае, если Вы предоставите решение, которое:
- не использует таблицы;
- имеет стопроцентную высоту;
- в котором подвал расположен в самом низу экрана, вне зависимости от разрешения/количества контента;
- использует только 4 <div> (три на колонки, один на подвал)
то мне будет очень интересно на него посмотреть, ибо учиться никогда не поздно А пока это бездоказательно

Ответить
Vladimir

Май 6, 2008 в 05:13

overflow: auto у элемента html нужен только для IE (по-моему, только для IE6, но седьмому вроде не вредит — нет под рукой, чтобы проверить). А в Konqueror 3.5.9 этот overflow: auto создает очень неприятные эффекты. Так что лучше подправить правила так, чтобы они были видны только IE.

Ответить