Трехколоночный макет на CSS с одинаковой высотой колонок

25 ноября 2007 г.

Представляю Вашему вниманию еще один 3-хколоночный макет страницы, реализованный с помощью XHTML и CSS.

Вот так он выглядит в миниатюре:

Особенности:

  • Оба сайдбара (левая и правая колонки) расположены с правой стороны. Такой тип страницы сейчас очень популярен, он используется на многих блогах.
  • HTML-код основной колонки расположен до начала кода обоих сайдбаров.
  • Все 3 колонки визуально растягиваются одинаково по вертикали при увеличении высоты одной из них. При этом не используются изображения.
  • Универсальность - макет можно использоваться как в случае с фиксированной шириной страницы, так и в случае с “резиновой” шириной. Для этого необходимо применить соответствующие CSS-свойства у 3-х блоков (в примере есть комментарии).
  • Кроссбраузерность проверена в основных популярных браузерах: Opera 9.23, FireFox 2.0, IE 6, IE 7, Safari/Win.
  • Валидный XHTML, валидный CSS.

HTML-код

Основа макета выглядит следующим образом:

  1. <html>
  2. <body>
  3.  
  4. <div id="wrapper">
  5.  
  6.   <div id="header"></div>
  7.  
  8.   <div id="container">
  9.  
  10.     <div id="sub-container">
  11.       <div id="wrpr">
  12.  
  13.         <div id="content">
  14.           <div id="text"></div>
  15.         </div>
  16.  
  17.         <div id="left"></div>
  18.  
  19.       </div>
  20.     </div>
  21.  
  22.     <div id="right"></div>
  23.  
  24.   </div>
  25.  
  26.   <div id="footer"></div>
  27.  
  28. </div>
  29.  
  30. </body>
  31. </html>

В связи с тем, что в “резиновом” варианте в Internet Explorer 7 наблюдался небольшой отступ справа от правой колонки, пришлось задействовать дополнительный контейнер #wrpr. При фиксированной верстке данный контейнер не нужен.

CSS-код

Здесь публикую только код, отвечающий за расположение и визуализацию колонок. Все остальное в примере.

  1. #wrapper {
  2.   /* для фиксированной ширины */
  3.   width: 900px;
  4.   margin: 0 auto;
  5.  
  6.   /* для "резиновой" ширины
  7.   width: expression((documentElement.clientWidth||document.body.clientWidth)<995?'1000px':'');
  8.   min-width: 1000px; */
  9. }
  10. #container {
  11.   width: 100%;
  12.   background: #D5FFD5; /* фон основной колонки */
  13. }
  14. * html #container {height: 1%;}
  15. #container:after {
  16.   /* закрываем плавающие блоки */
  17.   content: '.';
  18.   display: block;
  19.   clear: both;
  20.   visibility: hidden;
  21.   height: 0;
  22.   line-height: 0;
  23. }
  24. #sub-container {
  25.   float: left;
  26.   border-right: 200px solid #BFF2FF; /* фон правого сайдбара */
  27.  
  28.   /* для фиксированной ширины */
  29.   width: 700px;
  30.  
  31.   /* для "резиновой" ширины
  32.   width: 100%;
  33.   margin-left: -200px; */
  34. }
  35. #wrpr {
  36.   /* для "резиновой" ширины
  37.   margin-left: 200px; */
  38. }
  39. #content {
  40.   width: 100%;
  41.   float: left;
  42. }
  43. #text {
  44.   border-right: 200px solid #FFF2BF; /* фон левого сайдбара */
  45. }
  46. #left {
  47.   float: left;
  48.   width: 200px;
  49.   margin-left: -200px;
  50.   background: #FFF2BF; /* фон левого сайдбара */
  51.   position: relative;
  52. }
  53. #right {
  54.   float: left;
  55.   width: 200px;
  56.   margin-left: -400px;
  57.   background: #BFF2FF; /* фон правого сайдбара */
  58.   border-left: 200px solid #FFF2BF; /* фон левого сайдбара */
  59. }

Примеры

Смотрим готовый пример страницы, сверстанной описанным методом. Также можно посмотреть пример на реальном сайте, который я недавно верстал.

Для удобства можно скачать архив с примером универсальной трехколоночной страницы на CSS.

Теги: , , ,

автор: Dimox | рубрика CSS-верстка | TrackBack

Схожие статьи

Комментарии (22): »

Страницы: « 1 [2] Показать все

  1. 21
    Васек ( 2 дня назад ) Ответить

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

  2. 22
    gordi ( 2 дня назад ) Ответить

    Васек
    Посмотите и здесь: http://trifler.ru/blog/comment_1223575204.html
    Даже, Димирию понравилось :)

    @

Страницы: « 1 [2] Показать все

Ocтaвьтe кoммeнтapий

Помощь по добавлению кода и форматированию текста в комментарии:
  1. Как отформатировать текст комментария?

    Для этого необходимо использовать HTML-теги, например, <blockquote>, <a>, <strong>, <em> и другие.

  2. Как вывести в комментарии HTML-тег?

    Для этого необходимо заменить угловые скобки < и > на их ASCII-код - соответственно &lt; и &gt;.

    Например, чтобы вывести в комментарии тег <br />, используйте следующую запись: &lt;br /&gt;

  3. Как вставить пример кода без подсветки синтаксиса?

    Для этого используйте запись вида <code>ваш код</code>. При этом для визуального переноса строк кода необходимо задействовать соответствующий HTML-тег. Угловые скобки в коде НУЖНО заменять (см. пункт 2).

  4. Как вставить пример кода с подсветкой синтаксиса?

    Для этого используйте запись вида <code lang="html">ваш код</code>, где в параметре lang указывается нужный язык. Поддерживаемые языки: html, css, php, javascript и другие. Угловые скобки в коде в данном случае НЕ НУЖНО заменять.

Отправляя комментарий, Вы автоматически принимаете правила комментирования на этом блоге.

Правила комментирования на блоге dimox.name:

  1. Первый комментарий всегда проходит премодерацию.
  2. В поле "URL блога" можно указывать только ссылку на главную страницу Вашего блога. Ссылки на прочие веб-ресурсы (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Запрещается использовать в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия имя изменяется по усмотрению владельца блога. Просьба указывать нормальное имя или ник.
  4. Весьма вероятно, что короткий и неинформативный комментарий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.

Подписаться, не комментируя

Оповещать о новых комментариях по RSS

Другие статьи