Для размещения двух и более слоев по горизонтали применяется два способа. Первый подход использует параметр float, позволяющий состыковывать один слой с другим, а второй основан на задании положения слоев через позиционирование CSS. В резиновом дизайне со слоями, преимущественно используется метод float. Это связано с тем, что определить точные координаты элементов порой затруднительно, вдобавок, приходится применять команды, которые поддерживаются только последними версиями браузеров, а это снижает универсальность кода. Несмотря на некоторые недочеты, оба подхода имеют место быть в арсенале верстальщика и их надо знать для лучшего понимания принципов работы со слоями. Ниже пойдет речь о создании двух колонок с применением плавающих элементов.
Термин «плавающий элемент» не очень удачен, но, тем не менее, иногда встречается в литературе. Никто никуда не плавает, надо понимать, так называют элемент, обтекаемый с разных сторон текстом или другими элементами веб-страницы. Параметр float применяемый к слою определяет, по какой стороне будет выравниваться слой, при этом остальные элементы будут обтекать его с других сторон.
Основные параметры стиля для каждого из двух слоев показаны в таблице.
| Для левого слоя шириной 20 процентов | |
|---|---|
Слой 1 float: left |
Слой 2 margin-left: 21% |
| Для левого слоя шириной 200 пикселей | |
Слой 1 float: left |
Слой 2 margin-left: 210px |
Для левого слоя требуется всего два параметра: float — заставляет второй слой располагаться рядом по горизонтали с первым слоем и width, который устанавливает ширину слоя. Вторая колонка будет занимать все оставшееся место, поэтому для нее атрибут width не требуется.
Правый слой характеризуется лишь одним параметром — margin-left, он смещает левый край колонки на ширину правого слоя, плюс задает отступ между колонками. Поэтому величина этого свойства в таблице указана 21 процент, где 20 процентов это сама ширина первого слоя, а на один процент приходится расстояние между колонками. В случае задания ширины одной из колонок в пикселях, код останется прежним, но поменяются единицы измерения.
В примере 1 приводится код веб-страницы, на которой содержится заголовок, две колонки, одна из них отводится под меню, а вторая под контент и контактная информация. Ширина первой колонки с именем menu фиксирована и установлена в 200 пикселей, оставшееся пространство занято колонкой с именем content.
К сожалению, при попытке поменять колонки местами и установить слой фиксированной ширины справа, разные браузеры выдают непохожий результат. Поэтому использование параметра float в данном случае неприемлемо и следует обратиться к методу позиционирования слоев.
Пример 1. Код для создания двух колонокBODY { /* Основной шрифт текста */
font-family: Verdana, Arial, sans-serif;
}
#top { /* Верхняя часть с заголовком страницы */
background-color: #E3E8CC;
border: solid 1px black;
padding: 15 0 15 20;
margin-bottom: 15px;
}
.title { /* Заголовок сайта */
font-size: 24px;
font-weight: bold;
color: black;
padding-top: 10px;
padding-bottom: 10px;
}
#menu { /* Навигация по сайту */
width: 200px;
background-color: #E3E8CC;
border: solid 1px black;
float: left;
}
#menu P { /* Разделы меню */
font-size: 100%;
font-weight: bold;
text-align: left;
padding: 10px;
margin: 0px;
}
#menu A { /* Ссылки в меню */
font-size: 90%;
font-weight: normal;
}
#content { /* Основное содержание страницы */
background-color: #E3E8CC;
border: solid 1px black;
margin-left: 215px;
margin-bottom: 15px;
}
#bottom { /* Нижняя часть */
background-color: #E3E8CC;
border: solid 1px black;
}
#contact { /* Контактная информация */
float: left;
padding: 0px;
text-align: left;
}
#button { /* Всякие кнопочки */
padding: 0px;
text-align: right;
}
H1 { /* Заголовок страницы */
text-align: center;
font-size: 220%;
font-family: "Times New Roman", Times, serif;
font-weight: normal;
color: black;
padding: 0px;
margin: 0px;
}
#content P { /* Стиль основного текста */
font-size: 90%;
text-align: justify;
padding: 10px;
margin: 0px;
}
#contact P { /* Стиль контактов */
font-size: 80%;
padding: 5px;
margin-top: 0px
}
#button P { /* Стиль размещения кнопочек */
text-align: right;
padding: 5px;
margin: 0px;
}
</style>
</head>
<body>
<div id=top><span class=title>Заголовок сайта</span></div>
<div id=menu>
<p>Раздел 1<br>
<a href=#>Ссылка 1</a><br>
<a href=#>Ссылка 2</a><br>
<a href=#>Ссылка 3</a><br>
</p>
<p>Раздел 2<br>
<a href=#>Ссылка 1</a><br>
<a href=#>Ссылка 2</a><br>
<a href=#>Ссылка 3</a><br>
</p>
<p>Раздел 3<br>
<a href=#>Ссылка 1</a><br>
<a href=#>Ссылка 2</a><br>
<a href=#>Ссылка 3</a><br>
</p>
</div>
<div id=content>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat
volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi.
Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel
illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te
feugat nulla
facilisi.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.Duis te feugifacilisi. Duis
autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum
dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla
facilisi.</p>
</div>
<div id=bottom>
<div id=contact><p><b>Контактная информация</b><br>E-mail:
<u>vasya@pupkin.ru</u></div>
<div id=button><p><img src=images/sample.gif width=88 height=31
vspace=5> <img src=images/sample.gif width=88 height=31 vspace=5></p></div>
</div>
</div>
</body>
</html>