Оглавление скрыть


Вы можете авторизоваться через ВКонтакте, Фейсбук и оставить комментарий


Резиновая верстка div 3 колонки (HTML)

Резиновый макет HTML-страницы из трех колонок лучше делать, при помощи див слоев (Страница загружается быстрей, поисковые системы довольны и это круче верстки таблицами).

Смотреть онлайн пример.

Пример

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

Обратите внимание на код! Центральный див слой (<div id="center">) располагается после слоев <div id="left"> и <div id="right">.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Резиновая верстка div 3 колонки (HTML)</title>

<style type="text/css">
#left, #center, #right {border:#CCC 1px solid; padding:5px 10px;}

/* левая колонка обтекание слева, ширина 200 пикселей */
#left {float:left; width:200px;}

/* правая колонка обтекание справа, ширина 200 пикселей */
#right {float:right; width:200px;}

/* середина, ширина резиновая, внешние отступы слева и справа 240 пикселей */
#center {margin:0 240px;}

</style>

</head><body>

<div id="left">
<p>В левой колонке часто располагается навигация сайта.</p>
</div>

<div id="right">
<p>В правой колонке часто размещают новости, форму авторизации, поиска, ссылки, спонсоры и так далее.</p>
</div>

<div id="center">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

</body></html>
Опубликовано: 06 февраля 2012  ·  Автор: Артём Фёдоров  ·  16323 просмотра

Категория

ГлавнаяВеб-дизайнHTMLВерсткаРезиновая верстка div 3 колонки (HTML)

Чтобы оставить комментарий нужно авторизоваться на сайте
или войти через ВКонтакте или Фейсбук

Войти через ФейсбукВойти через Твиттер

Комментарии

А что с footer? <div style="clear:both">Footer</div>
Артём Фёдоров · 4 года назад
а как быть с footer???
Максим Чернышов · 4 года назад
О Боже, наконец -то я нашёл это простое изящьное решение...
JaFar · 5 лет назад
Верстка, HTML, Веб-дизайн

© 2010-2017 expange.ru
При полном или частичном копировании статей сайта, ссылка на источник обязательна.

Хотите узнать больше информации, пишите на: artem@expange.ru

Полезное онлайн  ·  Новости  ·  Изображения  ·  Статьи по датам

О проекте  ·  Правила пользования  ·  Представительства

Благодарности и пожелания