Главная CSS-верстка

Трехколоночный макет на 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)

  1. Оба сайдбара (левая и правая колонки) расположены с правой стороны.

    Звучит дико :)
    Лично я против использования раскраски через border. По эстетическим причинам и по причинам проблемного редизайна таких макетов.

    • делать раскраску блоков рамкой это жесть)) согласен, зачем так мучиться чтобы сделать каркас страницы на дивах мне непонятно, что мешает сделать каркас таблицей?

      • Да простит их гуру вёрстки, ибо не ведуют дети, что лепечут :)
        А способ реальный. Сам его давно юзаю. Есть другое решение: использовать бэкграунд для родителя, который уже 100% в высоту (например body). Но способ с бордерами мне, лично, больше нравицо. Во первых не нужен лишний файл-бэкграунд. Во-вторых, кошерней смотрицо в режиме «без графики».
        Пример, где я использовал: laysa.ru

  2. Не вижу ничего проблемного в редизайне макетов такого типа.

  3. Я, конечно, тоже поддерживаю мысль, что, по сути, использование бордера как места под колонку нелогично и вообще (действительно) дико. Но на практике мы действительно имеем проблему с кроссбраузерной версткой трехколоночной страницы. Те же отрицательные отступы аналогично должны быть названы «дикими». Поэтому, пусть каждый для себя решает, что он будет использовать в жизни. Я думаю и этот способ имеет право на жизнь если он реально работает. А вам, Dimox, спасибо за хорошо описанный вариант.

  4. Я, конечно, понимаю нелогичность такого метода разметки. Но дивовая верстка не дает возможность использовать такие же средства представления страницы, как с помощью таблиц (виной все та же пресловутая кроссбраузерность), например, вытягивание на вcю высоту экрана, поэтому, используя дивы приходится применять различные трюки, чтобы получить нужный эффект. ИМХО, с CSS2 это неизбежно. И в этом нет ничего страшного.

    ASh, пожалуйста ;).

  5. Это конечно оригенально, но я не думаю, что подобный макет подойдет не под любой контект. Поэтому массово использовать я бы его не советовало, да и трудности с ним будут, но если ваш контент идеально вписывается в такой расклад, то почему бы и нет!

  6. Мангуст, не все, что предлагается — для массового использования.

  7. А если сделать ширину не фиксированного размера, а 100%, все колонки останутся на своих местах? Не люблю, когда меня искусственно ограничивают и загоняют в определенные рамки…, это всеравно что написать на сайте: «сайт нормально отображается только через Internet Explorer»

  8. Да, конечно колонки останутся на своих местах.

  9. Наезд текста на картинку на реальном сайте надо поправить :)

  10. gordi, я когда и верстал, и писал эту статью, вспоминал тебя, потому что у меня практически то же самое получилось :)

    И еще. Я хотел показать этот вариант именно с использованием бордюров.

  11. Да, помню, конечно. Бордюров там немеряно))). Так у него еще в самом начале типа резинового и был диз.

    На счет узнаваемости — как он может быть не узнаваем, если блог популярен? Или ты имешь в виду, что схожие дизы используются на многих других сайтах?

  12. Как ты наверно помнишь, делал с border-ом дизай для LastoBlog :)
    Мороки там было не меряно :)
    Сейчас думаю на резиновый контент переходить.
    С Вадимом, уже обсуждал этот вопрос.
    Слишком уж у него дизайн узнаваем :)

  13. >Так у него еще в самом начале типа резинового и был диз.
    Так то еще на таблицах было :)
    Практически все используют диз по дефолту.
    Клонов пруд пруди, лень наверное самим, что-либо менять
    или не могут, работает и ладно :)

  14. Во всем сказанном согласен с тобой.

  15. Это все хорошо, конечно, но…
    Столкнулся сейчас с такой же проблемой, но ещё осложненной тем, что футер должен быть всегда прилеплен к низу.
    Может подскажете, что-нибудь?

  16. Владимир, в этой статье описаны возможные способы.

  17. Спасибо, почитаем!

  18. Спасибо — скачал оба дизайна. С версткой на DVD у меня пока не очень (

  19. В IE 5.5 криво отображается правая колонка

  20. А как сделать так, чтобы между колонками были отступы? Колонки имеют background, но между ними прозрачные отступы и просвечивался основной фон страницы?