Верстка трехколоночного макета страницы с помощью CSS
В тот момент, когда я стал переходить на дивовую верстку, а произошло это почти год назад (как быстро летит время), одним из серьезных уроков, которые я должен был освоить, был простой и удобных способ верстки трехколоночного макета страницы с использованием <div>‘ов и каскадных таблиц стилей.
Хорошо, когда кто-то уже сделал подобное до тебя, не приходится заново “придумывать колесо”. Достаточно найти готовое решение, которое следует хорошенько запомнить и адаптировать под себя, если потребуется. Моим замечательным помощником по данному вопросу стал уже не однократно упоминаемый мной сайт Layout Gala, на котором предлагается множество хороших макетов для верстки страниц со всевозможными вариантами представления контента.
Оный макет хорошо зарекомендовал себя, поэтому я его постоянно использую на практике.
Особенности данного макета:
- Текучая (резиновая) верстка — растяжка происходит за счет контентной части, левая и правая колонки фиксированные. Я так полагаю, что этот макет можно изменить и под одновременное растяжение всех 3-х частей. Но пока мне этого не приходилось делать.
- Используется фактор внутренней поисковой оптимизации — блок с контентом расположен в коде до начала левой и правой колонки. Этот один из моих любимых моментов в дивовой верстке. Контент начинается практически в самом начале разметки страницы. При желании можно и хэдер, если он достаточно большой, разместить ниже кода контента.
Реализация в этом макете трех нужных колонок достигается за счет использования плавающих блоков (контент, левая и правая колонки) и отрицательных отступов для левой и правой колонок.
Структура HTML-кода
При использовании оригинального кода макета с Layout Gala в нашем “любимом” IE наблюдался следующий баг — при быстром сужении окна браузера левая колонка съезжала к центру. Чтобы от этого избавиться, я поместил блоки контента и обоих колонок в дополнительный контейнер с id=”container” и указал ему ширину в 100%.
<html>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="container">
<div id="content">
<div id="text">
</div>
</div>
<div id="left"></div>
<div id="right"></div>
<div class="clear"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
CSS-таблицы
Приведу здесь только ту часть CSS-кода, которая формирует 3 колонки в блочном варианте верстки (остальное будет в примере). Прошу обратить внимание, что для того, чтобы сработало CSS-свойство #container {width: 100%;} для устранения бага в IE, необходимо одновременно задействовать правила минимальной ширины для основного блока (width: expression и min-width).
#wrapper {
width: 100%;
width: expression((documentElement.clientWidth||document.body.clientWidth)<995?'1000px':'');
min-width: 1000px;
}
#container {width: 100%;}
#content {
width: 100%;
float: left;
}
#text {margin: 0 250px;}
#left {
float: left;
width: 250px;
margin-left: -100%;
}
#right {
float: left;
width: 250px;
margin-left: -250px;
}
Пример
Можно посмотреть на готовый пример макета страницы в три колонки с использованием блочной верстки (2 колонки фиксированные).
Комментарии (39)
Ну так, а как растянуть все это на высоту 100%?
И можно ли это сделать вообще (для IE6+ FF2+ одновременно совместимым)?
Помоему таблицы проще и универсальнее в этом плане.
Спасибо.
Ровно сверху над твоим комментом есть пример с высотой на 100%, я оставлял раньше.
www.strictlycss.com/examples/fluid-css-layout-with-faux-columns-1.asp
Или вот подборка:
pmob.co.uk/temp/3colfixedtest_explained.htm
Безусловно, таблицами легче. Безусловно, не универсальние, ибо местами ячейки таблицы средствами CSS ты в произвольном порядке не переставишь. Универсальность — суть DIV’ной вёрстки :-)
Удачи.
Ну тогда скажи как мне в твоем примере
(http://www.strictlycss.com/examples/fluid-css-layout-with-faux-columns-1.asp)
вставлять маленькие рекламные баннеры в правую и левую колонки так чтоб они были всегда внизу в колонках. Содержимое то что вверху колонок должно там же и оставаться.
Растяжка по ширине и высоте должна сохраняться.
Покажи универсальность.
Люди, помогите пожалуйста. Пытался по этому шаблону разбить на блоки как на этом сайте Но ни как не получается и в общем итоге уже запутался где какой блок должен быть… (((Если это кому то будет не трудно, можете накидать макет из обычных блоков (без всякого оформления) только чтобы каждый блок хоть по цветам отличался.
Этот сайт конечно не блочный, а мне хочется разобраться в построении блочного сайта с большим вложением блоков.
Спасибо! Если не трудно на е-майл ссылку или код stanlybsv{собака}yandex.ru
Все хорошо… но пример не для начинающих ибо в тексте html даже (наверное по спешке) css не подключили:)
А может кто-нибудь объяснить как действуют отрицательные марджины? вот никак не дойдет, куда же все-таки сдвигается блок при margin-left:-100%. При этом если третьему блоку не задать его сдвиг в margin-left:-250px, то ни один из них не покажется, как будто они друг от друга зависят ???
Данный блок как бы поднимается на этаж выше. Это происходит за счет
margin-left:-100%для блока#left, плюс за счетfloat: leftдля блока#content. В результате этого блок контента и сайдбара встают на один уровень по горизонтали.Не знаю, как уж вы это проверяли, но у меня они не исчезают, да и не должны исчезать.
Макет хороший, единственный недостаток этого макета в том что если макету задать максимальную ширину, то в ie 6 левая колонка улетает.
Отлично! Я в пятницу сидел корпоративный сайт после программиста верстал :) Славные они люди, картинки не сжали, в таблицах сверстали, 1.5 мб при первой загрузке.
В общем, верстал-верстал и понял что 3 колонки с 2 фиксированными у меня не получаются. Спасибо за пример, сколько лет прошло, а актуальность не теряет :)
Есть в этом макете один минус, который однако в некоторых случаях делает его непригодным к использованию. Если закомментировать (либо удалить) из html-файла див с содержимым левой колонки, то контент так и останется висеть с огромным отступом слева.
И собственно вопрос, как сделать, чтоб при удалении левой колонки (или правой) колонка контента автоматически занимала все отведенное ей пространство?
Никакой это не минус. Решается корректировкой всего одного стиля:
Если надо без левой колонки, то будет так:
Ну это-то очевидно.
Но речь о том, чтобы удалять столбцы совершенно без каких либо других правок. Например как в таблицах:
Здесь если удалить первую колонку, то центральная автоматически займет ее место.
Аналогичный эффект можно получить на дивах, используя display: table-cell, но ие6 и 7 остаются не у дел, а это в большинстве случаев не приемлемо.
Жаль, что footer «в воздухе висит»…
почему-то когда css я перевожу в отдельный файл и подключаю
то левая колонка и правая не отражается…
т. е. если все на одной странице, то работает, а так не работает
(я новичок)
Cпассибо за урок! Три раза использовал в текущем сайте! Очень качественно. ВАш сайт в избранное!
Я с этими тремя колонками намучилась, так до сих пор и не получается.
Глянь тут matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
Там поясняется технология с картинками — все колонки одной высоты.
Так же тут куча примеров:
www.pmob.co.uk/temp/3colfixedtest_explained.htm
Попробуй bootstrap, там всё на базовом уровне реализовано круто, может быть достаточно. Но есть свои минусы — достаточно трудно сделать колонки одной длины. Я сделал, скоро где-то выложу статью на эту тему. (-:
Вообще, писк моды сейчас bootstrap. По сути это ты подключаешь файл CSS и, давая DIVам определённые классы, творишь чудеса.
Здесь есть практически все, что нужно, с массой примеров — csslayout.ru/