Поиск 

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

Четверг, Декабрь 24, 2009 г.
Представляю Вашему вниманию еще один 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; /* фон левого сайдбара */
}

Можно посмотреть пример на реальном сайте
Взято с www.dimox.name
Теги: CSS | XHTML | Валидация | Верстка Автор: Pryanik | Просмотров: 4704 | Нет комментариев | print |

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

все похожие статьи 
Категории
ТОП 10 - Авторы
  1     Луна   1964     2.93   
  2     pobeda   487     2.96   
  3     Tais   444     3.11   
  4     Foma   139     2.92   
  5     Lubov   52     2.91   
  6     Angel   45     2.93   
  7     Dolores   45     2.77   
  8     Paradiz   31     2.84   
  9     Xenta   29     2.85   
  10     Pryanik   26     2.8   
все авторы 
Последние статьи

Торт Пьяная вишня

Понедельник, Апрель 01, 2019 г.
|
Луна | 1434 |

Вода

Среда, Январь 24, 2018 г.
|
Луна | 915 |

Фруктовые соки

Среда, Январь 24, 2018 г.
|
Луна | 779 |

Вода и жизнь

Среда, Январь 24, 2018 г.
|
Луна | 1333 |

Голубцы с грибами

Среда, Январь 24, 2018 г.
|
Луна | 1355 |
Популярные статьи

Мавритания

Понедельник, Март 14, 2011 г.
|
Луна | 6205 |
|
pobeda | 70014 |

Вулканы

Вторник, Май 11, 2010 г.
|
Tais | 69935 |

Горные породы

Четверг, Май 13, 2010 г.
|
Tais | 83524 |

Материки

Вторник, Май 11, 2010 г.
|
Tais | 327409 |

Облако тегов