- •Фиксированный дизайн. Свойство float
- •Использование свойства float
- •Пример 1. Добавление свойства float
- •Добавление margin для создания двухколонного макета
- •Пример 2. Двухколонный макет
- •Пример 3. Применение свойства clear
- •Результат данного примера показан на рис. 1.
- •Объектная модель
- •Браузеры
- •Фиксированная ширина, использование float
- •Пример 1. Использование float
- •Пример 2. Модификация кода
- •Пример 3. Создание макета с двумя колонками
- •Результат данного примера показан на рис. 1.
- •Пример 4. Код html 5
- •Фиксированная ширина, float плюс margin
- •Пример 1. Использование float и margin-right
- •Пример 2. Создание макета с двумя колонками
- •Пример 3. Код html 5
- •Фиксированная ширина, навигация слева
- •Пример 1. Создание двух колонок
- •Пример 3. Код html 5
- •Резиновая ширина, навигация слева
- •Пример 1. Создание двух колонок
- •Пример 2. Макет с двумя колонками
- •Фиксированная ширина, три колонки
- •Пример 1. Колонки в коде
- •Пример 2. Стиль для создания колонок
- •Пример 3. Трехколоночный макет
Пример 2. Двухколонный макет
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Две колонки</title>
<style type="text/css">
#container {
width: 750px; /* Общая ширина колонок */
}
#leftcol { /* Левая колонка*/
width: 200px; /* Ширина слоя */
float: left; /* Состыковка с соседним слоем */
color: white; /* Цвет текста*/
background: #008000; /* Цвет фона левой колонки */
}
#rightcol { /* Правая колонка*/
background: #e0e0e0; /* Цвет фона правой колонки */
margin-left: 200px; /* Отступ слева */
}
p {
padding: 10px; /* Поля вокруг текста */
margin: 0; /* Убираем отступы */
}
</style>
</head>
<body>
<div id="container">
<div id="leftcol"><p>...</p></div>
<div id="rightcol"><p>...</p></div>
</div>
</body>
</html>
При таком способе верстки при уменьшении ширины окна браузера слои остаются на своих исходных местах, но появляется горизонтальная полоса прокрутки. Также наблюдаются небольшие различия в браузерах, связанные с полями и отступами вокруг текста, расположенного внутри колонок. Но эти отличия не существенны и легко корректируются за счет применения свойств padding и margin.
Если внизу после колонок предполагается разместить еще один слой, то для него следует использовать стилевое свойство clear. Дело в том, что браузеры по-разному располагают этот нижележащий слой, поэтому следует отменить действие обтекания, что clear как раз и делает (пример 3).
Пример 3. Применение свойства clear
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Две колонки</title>
</head>
<body>
<div id="container">
<div id="leftcol">...</div>
<div id="rightcol">...</div>
</div>
<div style="clear: left">...</div>
</body>
</html>
Стиль для данного примера останется неизменным и только добавляется тег <div> с атрибутом style="clear: left". Значение свойства clear обычно совпадает со значением float.
Резюме
При верстке двухколонного макета очень часто применяется свойство float, который добавляется к каждому слою. Хотя этот атрибут предназначен для создания обтекания, за счет своей универсальности он уже давно взят на вооружение верстальщиков. Принцип его применения следующий. Вокруг слоя при добавлении float создается обтекание, но поскольку ширина каждого слоя жестко задана, то слои располагаются не друг под другом, а рядом по горизонтали. При этом и формируются колонки макета.
Такой способ создания многоколонного макета имеет и определенный недостаток, который проявляется в том, что при уменьшении окна браузера до определенной величины, колонки «перепрыгивают» одна под другую. Чтобы этого избежать дополнительно используют стилевое свойство margin-left, добавляя его к правой колонке. В таком случае слои остаются на своих исходных местах, независимо от размеров окна браузера.
float
Описание
Определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон. Когда значение свойства float равно none, элемент выводится на странице как обычно, при этом допускается, что одна строка обтекающего текста может быть на той же линии, что и сам элемент.
Синтаксис
float: left | right | none | inherit
Значения
left
Выравнивает элемент по левому краю, а все остальные элементы, вроде текста, обтекают его по правой стороне.
right
Выравнивает элемент по правому краю, а все остальные элементы обтекают его по левой стороне.
none
Обтекание элемента не задается.
inherit
Наследует значение родителя.
Пример
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>float</title>
<style type="text/css">
.layer1 {
float: left; /* Обтекание по правому краю */
background: #fd0; /* Цвет фона */
border: 1px solid black; /* Параметры рамки */
padding: 10px; /* Поля вокруг текста */
margin-right: 20px; /* Отступ справа */
width: 40%; /* Ширина блока */
}
</style>
</head>
<body>
<div class="layer1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
</div>
<div>
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.
</div>
</body>
</html>