Верстка трехколоночного макета страницы с помощью 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)

  1. 11 июля 2008 г. в 11:56

    Вот здесь еще рассматривается этот вопрос — http://blog.sjinks.org.ua/css/209-cross-browser-liquid-three-column-layout-full-height/

  2. Gruz
    11 июля 2008 г. в 12:46

    Большое спасибо! По-моему то, что надо. Читаю.

  3. gordi
    11 июля 2008 г. в 16:05

    Gruz>Я видел ту страницу…
    А с чего вы взяли что она не резиновая?
    Область контента резиновая и это параметр регулируется.
    Или вам надо чтобы все колонки были резиновые?

  4. Gruz
    11 июля 2008 г. в 16:10

    Она в Лисице резиновая, а в ИЕ — нет (или наоборот). Я пробовал с разными параметрами.

  5. gordi
    11 июля 2008 г. в 16:23

    В IE6(7), OPERA9.23, OPREA9.5, FF2.014, FF3
    Все, как и заявлено в статье.
    На странчке примера, специально показан блок с фиксированной шириной больше заданного min-width.
    В чем вы смотрите?

  6. gordi
    11 июля 2008 г. в 16:56

    Все примеры изначально работают.
    Не однократно проверены в боевых условиях.
    Аккуратность и внимательность не повредит :)

  7. Дмитрий
    4 сентября 2008 г. в 20:45

    Спасибо огромное! Давно искал хороший дивовый шаблон и тут — такой подарок:)

  8. IR
    3 февраля 2009 г. в 04:46

    Жаль, фоны колонок не растягиваются на всю высоту центрального блока…

    1. Gruz
      3 февраля 2009 г. в 21:51 / ответ на коммент IR

      Наприклад:
      http://www.strictlycss.com/examples/fluid-css-layout-with-faux-columns-1.asp

  9. css-friend
    29 апреля 2009 г. в 05:53

    Ну так а как растянуть все это на высоту 100% ?
    И можно ли это сделать вообще (для IE6+ FF2+ одновременно совместимым) ?
    Помоему таблицы проще и универсальнее в этом плане.
    Спасибо.

    1. Gruz
      29 апреля 2009 г. в 21:54 / ответ на коммент css-friend

      Ровно сверху над твоим комментом есть пример с высотой на 100%, я оставлял раньше.

      http://www.strictlycss.com/examples/fluid-css-layout-with-faux-columns-1.asp

      Или вот подборка:
      http://pmob.co.uk/temp/3colfixedtest_explained.htm

      Безусловно, таблицами легче. Безусловно, не универсальние, ибо местами ячейки таблицы средствами CSS ты в произвольном порядке не переставишь. Универсальность — суть DIV’ной вёрстки :-)

      Удачи.

      1. css-friend
        21 мая 2009 г. в 20:04 / ответ на коммент Gruz

        Ну тогда скажи как мне в твоем примере
        (http://www.strictlycss.com/examples/fluid-css-layout-with-faux-columns-1.asp)
        вставлять маленькие рекламные баннеры в правую и левую колонки так чтоб они были всегда внизу в колонках. Содержимое то что вверху колонок должно там же и оставаться.
        Растяжка по ширине и высоте должна сохраняться.
        Покажи универсальность.

  10. Антон
    31 августа 2009 г. в 15:21

    Люди, помогите пожалуйста. Пытался по этому шаблону разбить на блоки как на этом сайте Но ни как не получается и в общем итоге уже запутался где какой блок должен быть… ((( Если это кому то будет не трудно, можете накидать макет из обычных блоков (без всякого оформления) только чтобы каждый блок хоть по цветам отличался.

    Этот сайт конечно не блочный, а мне хочется разобраться в построении блочного сайта с большим вложением блоков.

    Спасибо! Если не трудно на е-майл ссылку или код stanlybsv{собака}yandex.ru

  11. Александр
    12 марта 2010 г. в 12:42

    Все хорошо…но пример не для начинающих ибо в тексте html даже (наверное по спешке) css не подключили:)

  12. Neon
    13 марта 2010 г. в 16:54

    А может кто нибудь объяснить как действуют отрицательные марджины? вот никак не дойдет, куда же все таки сдвигается блок при margin-left:-100%. При этом если третьему блоку не задать его сдвиг в margin-left:-250px, то ни один из них не покажется, как будто они друг от друга зависят ????

    1. 14 марта 2010 г. в 12:02 / ответ на коммент Neon

      вот никак не дойдет, куда же все таки сдвигается блок при margin-left:-100%

      Данный блок как бы поднимается на этаж выше. Это происходит за счет margin-left:-100% для блока #left, плюс за счет float: left для блока #content. В результате этого блок контента и сайдбара встают на один уровень по горизонтали.

      При этом если третьему блоку не задать его сдвиг в margin-left:-250px, то ни один из них не покажется, как будто они друг от друга зависят ????

      Не знаю, как уж вы это проверяли, но у меня они не исчезают, да и не должны исчезать.

  13. artylion
    7 апреля 2010 г. в 12:30

    Макет хороший, единственный недостаток этого макета в том что если макету задать максимальную ширину, то в ie 6 левая колонка улетает.

  14. 17 мая 2010 г. в 10:23

    Отлично! Я в пятницу сидел корпоративный сайт после программиста верстал :) Славные они люди, картинки не сжали, в таблицах сверстали, 1.5 мб при первой загрузке.

    В общем, верстал-верстал и понял что 3 колонки с 2 фиксированными у меня не получаются. Спасибо за пример, сколько лет прошло, а актуальность не теряет :)

  15. Олег
    6 июня 2010 г. в 19:42

    Есть в этом макете один минус, который однако в некоторых случаях делает его непригодным к использованию. Если закомментировать (либо удалить) из html-файла див с содержимым левой колонки, то контент так и останется висеть с огромным отступом слева.
    И собственно вопрос, как сделать, чтоб при удалении левой колонки (или правой) колонка контента автоматически занимала все отведенное ей пространство?

    1. 7 июня 2010 г. в 13:40 / ответ на коммент Олег

      Никакой это не минус. Решается корректировкой всего одного стиля:

      #text {margin: 0 250px;}

      Если надо без левой колонки, то будет так:

      #text {margin: 0 250px 0 0;}
      1. Олег
        7 июня 2010 г. в 14:27 / ответ на коммент Dimox

        Ну это-то очевидно.
        Но речь о том, чтобы удалять столбцы совершенно без каких либо других правок. Например как в таблицах:

        <table>
           <tr>
              <td class="a">1</td>
              <td>2</td>
              <td class="a">3</td>
           </tr>
        </table>
        
        table {width: 100%;}
        .a {width: 250px;}
        

        Здесь если удалить первую колонку, то центральная автоматически займет ее место.
        Аналогичный эффект можно получить на дивах, используя display: table-cell, но ие6 и 7 остаются не у дел, а это в большинстве случаев не приемлемо.

  16. Евгений
    15 мая 2011 г. в 13:46

    Жаль, что footer «в воздухе висит»…

  17. ivn
    16 ноября 2011 г. в 10:58

    почему то когда css я перевожу в отдельный файл и подключаю

    то левая колонка и правая не отражается….
    т.е. если все на одной странице, то работает, а так не работает
    (я новичок)

  18. Денис
    23 января 2012 г. в 19:51

    Cпассибо за урок! Три раза использовал в текущем сайте! Очень качественно. ВАш сайт в избранное!

  19. Vika
    2 апреля 2013 г. в 14:43

    Я с этими тремя колонками намучилась, так до сих пор и не получается.

    1. 2 апреля 2013 г. в 15:52 / ответ на коммент Vika

      Глянь тут http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
      Там поясняется технология с картинками — все колонки одной высоты.

      Так же тут куча примеров:
      http://www.pmob.co.uk/temp/3colfixedtest_explained.htm

      Попробуй bootstrap, там всё на базовом уровне реализовано круто, может быть достаточно. Но есть свои минусы — достаточно трудно сделать колонки одной длины. Я сделал, скоро где-то выложу статью на эту тему. (-:

      Вообще, писк моды сейчас bootstrap. По сути это ты подключаешь файл CSS и, давая DIVам определённые классы, творишь чудеса.

  20. gordi
    2 апреля 2013 г. в 16:34

    Здесь есть практически все, что нужно, с массой примеров — http://csslayout.ru/

Ваш комментарий

Жирный текст

Ссылка

Цитата

Внутристрочный код

CSS-код

HTML-код

JavaScript-код

PHP-код