Трехколоночный макет на CSS с одинаковой высотой колонок
Представляю Вашему вниманию еще один 3-хколоночный макет страницы, реализованный с помощью XHTML и CSS.
Вот так он выглядит в миниатюре:
Особенности:
- Оба сайдбара (левая и правая колонки) расположены с правой стороны. Такой тип страницы сейчас очень популярен, он используется на многих блогах.
- HTML-код основной колонки расположен до начала кода обоих сайдбаров.
- Все 3 колонки визуально растягиваются одинаково по вертикали при увеличении высоты одной из них. При этом не используются изображения.
- Универсальность – макет можно использоваться как в случае с фиксированной шириной страницы, так и в случае с “резиновой” шириной. Для этого необходимо применить соответствующие CSS-свойства у 3-х блоков (в примере есть комментарии).
- Кроссбраузерность проверена в основных популярных браузерах: Opera 9.23, FireFox 2.0, IE 6, IE 7, Safari/Win.
- Валидный XHTML, валидный CSS.
HTML-код
Основа макета выглядит следующим образом:
<html>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="container">
<div id="sub-container">
<div id="wrpr">
<div id="content">
<div id="text"></div>
</div>
<div id="left"></div>
</div>
</div>
<div id="right"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
В связи с тем, что в “резиновом” варианте в Internet Explorer 7 наблюдался небольшой отступ справа от правой колонки, пришлось задействовать дополнительный контейнер #wrpr. При фиксированной верстке данный контейнер не нужен.
CSS-код
Здесь публикую только код, отвечающий за расположение и визуализацию колонок. Все остальное в примере.
#wrapper {
/* для фиксированной ширины */
width: 900px;
margin: 0 auto;
/* для "резиновой" ширины
width: expression((documentElement.clientWidth||document.body.clientWidth)<995?'1000px':'');
min-width: 1000px; */
}
#container {
width: 100%;
background: #D5FFD5; /* фон основной колонки */
}
* html #container {height: 1%;}
#container:after {
/* закрываем плавающие блоки */
content: '.';
display: block;
clear: both;
visibility: hidden;
height: 0;
line-height: 0;
}
#sub-container {
float: left;
border-right: 200px solid #BFF2FF; /* фон правого сайдбара */
/* для фиксированной ширины */
width: 700px;
/* для "резиновой" ширины
width: 100%;
margin-left: -200px; */
}
#wrpr {
/* для "резиновой" ширины
margin-left: 200px; */
}
#content {
width: 100%;
float: left;
}
#text {
border-right: 200px solid #FFF2BF; /* фон левого сайдбара */
}
#left {
float: left;
width: 200px;
margin-left: -200px;
background: #FFF2BF; /* фон левого сайдбара */
position: relative;
}
#right {
float: left;
width: 200px;
margin-left: -400px;
background: #BFF2FF; /* фон правого сайдбара */
border-left: 200px solid #FFF2BF; /* фон левого сайдбара */
}
Пример
Смотрим готовый пример страницы, сверстанной описанным методом.
Для удобства можно скачать архив с примером универсальной трехколоночной страницы на CSS.
* * *
Аренда оптического волокна.
Комментарии (24)
Звучит дико :)
Лично я против использования раскраски через border. По эстетическим причинам и по причинам проблемного редизайна таких макетов.
делать раскраску блоков рамкой это жесть)) согласен, зачем так мучиться чтобы сделать каркас страницы на дивах мне непонятно, что мешает сделать каркас таблицей?
Да простит их гуру вёрстки, ибо не ведуют дети, что лепечут :)
А способ реальный. Сам его давно юзаю. Есть другое решение: использовать бэкграунд для родителя, который уже 100% в высоту (например body). Но способ с бордерами мне, лично, больше нравицо. Во первых не нужен лишний файл-бэкграунд. Во-вторых, кошерней смотрицо в режиме “без графики”.
Пример, где я использовал: laysa.ru
Не вижу ничего проблемного в редизайне макетов такого типа.
Я, конечно, тоже поддерживаю мысль, что, по сути, использование бордера как места под колонку нелогично и вообще (действительно) дико. Но на практике мы действительно имеем проблему с кроссбраузерной версткой трехколоночной страницы. Те же отрицательные отступы аналогично должны быть названы “дикими”. Поэтому, пусть каждый для себя решает, что он будет использовать в жизни. Я думаю и этот способ имеет право на жизнь если он реально работает. А вам, Dimox, спасибо за хорошо описанный вариант.
Я, конечно, понимаю нелогичность такого метода разметки. Но дивовая верстка не дает возможность использовать такие же средства представления страницы, как с помощью таблиц (виной все та же пресловутая кроссбраузерность), например, вытягивание на вcю высоту экрана, поэтому, используя дивы приходится применять различные трюки, чтобы получить нужный эффект. ИМХО, с CSS2 это неизбежно. И в этом нет ничего страшного.
ASh, пожалуйста ;).
Это конечно оригенально, но я не думаю, что подобный макет подойдет не под любой контект. Поэтому массово использовать я бы его не советовало, да и трудности с ним будут, но если ваш контент идеально вписывается в такой расклад, то почему бы и нет!
Мангуст, не все, что предлагается – для массового использования.
А если сделать ширину не фиксированного размера а 100%, все колонки останутся на своих местах? Не люблю, когда меня искусственно ограничивают и загоняют в определенные рамки…, это всеравно что написать на сайте: “сайт нормально отображается только через Internet Explorer”
Да, конечно колонки останутся на своих местах.
Наезд текста на картинку на реальном сайте надо поправить :)
gordi, я когда и верстал, и писал эту статью, вспоминал тебя, потому что у меня практически то же самое получилось :)
И еще. Я хотел показать этот вариант именно с использованием бордюров.
Как ты наверно помнишь, делал с border-ом дизай для LastoBlog :)
Мороки там было не меряно :)
Сейчас думаю на резиновый контент переходить.
С Вадимом, уже обсуждал этот вопрос.
Слишком уж у него дизайн узнаваем :)
Да, помню, конечно. Бордюров там немеряно ))). Так у него еще в самом начале типа резинового и был диз.
На счет узнаваемости – как он может быть не узнаваем, если блог популярен? Или ты имешь в виду, что схожие дизы используются на многих других сайтах?
>Так у него еще в самом начале типа резинового и был диз.
Так то еще на таблицах было :)
Практически все используют диз по дефолту.
Клонов пруд пруди, лень наверное самим, что либо менять
или не могут, работает и ладно :)
Во всем сказанном согласен с тобой.
Это все хорошо, конечно, но…
Столкнулся сейчас с такой же проблемой, но ещё осложненной тем, что футер должен быть всегда прилеплен к низу.
Может подскажете, что-нибудь?
Владимир, в этой статье описаны возможные способы.
Спасибо, почитаем!
Спасибо – скачал оба дизайна. С версткой на DVD у меня пока не очень(
В IE 5.5 криво отображается правая колонка
Извините, вы в каком веке живете? =)
А как сделать так, чтобы между колонками были отступы? Колонки имеют background, но между ними прозрачные отступы и просвечивался основной фон страницы?
Сделать это можно через задание ширины колонок и отступов (margin).