Статьи:

Новости:

Разработка сайта для нотариусов Мы подготовили новое пакетное предложение по разработке сайтов для нотариусов. Если Вы - частный нотариус, то создание сайта у нас позволит вам:

Главная

Статьи

Дизайн и html-верстка

Верстка на div. Три колонки, с шапкой и подвалом

Очень удобный и практичный вариант резиновой (процентной )верстки - три колонки, шапка под лого, подвал под копирайт. Как правило, при таком расположении в левой колонке находится меню, в центральной - основной текст, правая колонка отдается под дополнительную информацию - новости, акции, банера, контакты и т.д.

Итак, сегодня - пример трехколоночной резиновой (процентной) верстки с шапкой и подвалом.

Код

<html>

<head>

<title></title>

</head>

<body>

<div id="container">

<div id="header"><br><br>Шапка сайта<br><br><br><br></div>

<div id="wrapper">

<div id="content"><br><br><br>Основное поле для текста<br><br><br></div>

</div>

<div id="navigation"><br><br><br>Поле навигации<br><br><br></div>
<div id="extra"><br><br><br>Поле для другой информации<br><br><br></div>

<div id="footer"><br><br>Подвал<br><br></div>

</div>

</body>

</html>

CSS

html,body{margin:0;padding:0}

div#header{position:relative}

div#wrapper{float:left;width:100%}

div#content{margin: 0 25%}

div#navigation{float:left;width:25%;margin-left:-100%;background:#B9CAFF}

div#extra{float:left;width:25%;margin-left:-25%; background:#FF8539}

div#footer{clear:left;width:100%; background: #333;color: #FFF}

Как оно выглядит

Примечания

header - шапка

wrapper - контейнер для основного текстового поля

content - основное текстовое поле

navigation - навигация

extra - другая информация

footer - подвал

Хотя данный тип верстки может применятся практически для любых задач, в некоторых случаях, например в нашем калькуляторе стоимости сайта, целесообразно использовать добрую старую табличную верстку сайтов.

Я думаю, вам будет интересна еще статья Верстка на div. Две колонки с шапкой и подвалом..

Галина Ивченко

Верстка на div. Две колонки с шапкой и подвалом.
Верстка div. Две ошибки верстки.