Автор: Тенгиз Куправа www.kuprava.ru

Гибкая компоновка web страницы с помощью тегов DIV

Одним из способов эффективной компоновки web-страниц является блочный тег DIV. Для этого с ним используют выравнивающее свойство float и свойство clear, запрещающее обтекание другими элементами. Приведем таблицу стилей и html-файл для следующей компоновки страницы:


Таблица стилей div.css:

body {margin: 0 auto; padding: 0; font-size: 70%; font-family: Georgia, serif; background-color: lightgrey;}
p,h1,h2,h3,h4,h5,h5,ol,ul {margin: 0px; padding: 0px; }

/* КОНТЕЙНЕР СТРАНИЦЫ */
#container {margin: 5px auto; width: 95%; background-color: #ffffff; text-align: left;}

/* КОНТЕЙНЕР ДЛЯ ЗАГОЛОВКА */
#header {width: 100%; clear: right;}

/* ЗАГОЛОВОК */
div#wrap {float:left; width:100%; }
div#cont {margin: 0 25% 0 25%; background-color: yellow; }
div#im {float:left; width:20%; margin-left:-95%; }
div#ext {float:left; width:20%; margin-left:-20%; }

/* КОНТЕЙНЕР ОСНОВНОЙ ЧАСТИ */
div#main {clear: both; width:100%; }

/* ОСНОВНАЯ ЧАСТЬ */
div#wrapper {float:left; width:100%; }
div#mid {margin: 0 175px 0 220px; }
div#leftcol {float:left; width:200px; margin-left:-100%; background-color: #29FDAF; }
div#rightcol {float:left; width:170px; margin-left:-170px; background-color: #DAF29F; }

#footer {border-top: 2px solid #a0a0a0; margin: 50px 0 0 0; padding: 10px; color: #a0a0a0; font-size: 0.8em; text-align: center; clear: both; }

Из файла div.css видно, что и в заголовке и в основной части все блоки выровнены по левому краю: float:left. Далее правильная компоновка достигается за счет:

- в блоках cont и mid, свойством margin, слева и справа освобождены места для левого и правого блоков: margin: 0 25% 0 25% или margin: 0 175px 0 220px .
- в левых и правых контейнерах задается отрицательное значение левого отступа margin-left, а также задается ширина width.
- использование процентов % делает ширину блоков плавающей, использование абсолютных значений делает ширину блоков фиксированной.

Сам html-файл оформляется так:


Скачайте готовый html-файл и просмотрите результат, изменяя ширину окна браузера.

Каждый вложенный тег DIV наследует свойства своих предков и родителей. Содержимое блока DIV управляется с помощью собственных стилей произвольно.

Вы можете легко добавить дополнительные контейнеры, например, в левую и правую часть основной части. Добавим новый тег DIV в контейнер rightcol - всего одну строку в таблицу стилей: div#rightcol2 {width:170px; background-color: lightblue; } . Соответствующий фрагмент html-файла будет таким:


Скачайте таблицу стилей div2.css и изменённый html-файл и просмотрите результат.

Большой выбор бесплатных шаблонов можно найти на web-mastery.info.