Фиксированный дизайн. Параметр float
Рассмотрим, как располагать рядом по горизонтали два и более слоя. По умолчанию, использование тега <DIV> для создания слоя, автоматически делает и перенос строки после него, поэтому несколько идущих подряд слоев выстраиваются по вертикали. Нас же интересует, а как сделать то же самое, но по горизонтали, чтобы можно было создать две колонки. Для решения данной задачи есть два подхода: первый основан на использовании параметра float, второй — на позиционировании элементов.
Использование параметра float
Чтобы расположить два слоя рядом друг с другом по горизонтали, воспользуемся стилевым параметром float со значением left. Этот элемент говорит, что слой необходимо выровнять по левому краю и обтекать его по правой стороне. Таким образом, рядом лежащий второй слой будет пристыкован к первому справа.
Теоретически, параметр float достаточно задавать лишь для одного слоя из двух. Однако браузер Internet Explorer в этом случае между слоями добавляет небольшой промежуток, что не всегда желательно, а Firefox накладывает слои друг на друга. Чтобы все смотрелось именно так, как хочется, float следует указывать для всех слоев (пример 1).
Пример 1. Добавление параметра float
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Две колонки</title>
<style type="text/css">
#leftcol { /* Левая колонка*/
width: 200px; /* Ширина слоя */
float: left; /* Состыковка с соседним слоем */
color: white; /* Цвет текста*/
padding: 10px; /* Поля вокруг текста */
background: #008000; /* Цвет фона левой колонки */
}
#rightcol { /* Правая колонка*/
width: 550px; /* Ширина слоя */
float: left; /* Состыковка с соседним слоем */
padding: 10px; /* Поля вокруг содержимого */
background: #e0e0e0; /* Цвет фона правой колонки */
}
</style>
</head>
<body>
<div id="leftcol">...</div>
<div id="rightcol">...</div>
</body>
</html>
Высота слоев определяется их содержимым, поэтому подход, показанный в данном примере, создаст две прямоугольные области разной высоты и цвета.
Главной особенностью приведенного подхода является тот момент, что при уменьшении окна браузера до 750 пикселов и меньше, слои располагаются по вертикали друг под другом (рис. 1). Иными словами, макет «рассыпается» на отдельные блоки.
Рис. 1. Вид макета при уменьшении размера окна браузера
Чтобы подобная ситуация не происходила, следует воспользоваться параметром margin.
Добавление параметра margin для создания двухколонного макета
Опять воспользуемся параметром float, чтобы расположить колонки рядом, но добавим его только для первого слоя. При этом в стиле второго слоя следует установить параметр margin-left, значение которого равно ширине левой колонки. Но здесь есть одна хитрость — ширину правой колонки задавать нельзя, потому что это приведет к переносу блоков в браузере Internet Explorer при уменьшении окна браузера. А именно этого мы стараемся избежать. Поэтому общую ширину макета установим с помощью еще одного слоя, назовем его container, а остальные слои будут располагаться внутри него (пример 2). В этом случае ширину правой колонки можно не задавать, поскольку она будет занимать все доступное пространство.
Пример 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=windows-1251">
<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=windows-1251">
<title>Две колонки</title>
</head>
<body>
<div id="container">
<div id="leftcol">...</div>
<div id="rightcol">...</div>
</div>
<div style="clear: left">...</div>
</body>
</html>
Стиль для данного примера останется неизменным и только добавляется тег <DIV> с атрибутом clear: left. Значение этого параметра обычно совпадает со значением float.
Резюме
При верстке двухколонного макета очень часто применяется параметр float, который добавляется к каждому слою. Хотя этот атрибут предназначен для создания обтекания, за счет своей универсальности он уже давно взят на вооружение верстальщиков. Принцип его применения следующий. Вокруг слоя при добавлении float создается обтекание, но поскольку ширина каждого слоя жестко задана, то слои располагаются не друг под другом, а рядом по горизонтали. При этом и формируются колонки макета.
Такой способ создания многоколонного макета имеет и определенный недостаток, который проявляется в том, что при уменьшении окна браузера до определенной величины, колонки «перепрыгивают» одна под другую. Чтобы этого избежать дополнительно используют стилевой атрибут margin-left, добавляя его к правой колонке. В таком случае слои остаются на своих исходных местах, независимо от размеров окна браузера.
| Статья опубликована: 30.03.2006 | Последнее обновление: 01.05.2008 |
Прежде, чем писать комментарий к статье, примите во внимание следующие моменты.
- Не задавайте вопросы в комментариях, для этой цели предназначен форум, где вы получите нужную помощь.
- Удаляются любые комментарии, которые:
- включают множество ошибок;
- написаны безграмотно;
- не имеют отношения к данной статье;
- не содержат никакой полезной информации для посетителей.
- Для выделения отдельных слов используйте следующие команды: [b]жирный[/b], [i]курсив[/i], [color=цвет]цветной текст[/color], [tag]тег[/tag], [var]параметр[/var], [code]пример[/code].
- Потренироваться в написании комментариев вы можете в песочнице.
Комментарии к статье
coolreal
19.04.2006
Yuzer
30.06.2006
Chaklun
14.09.2006
блоки не расспаются только потому, что они в контейнере? я убрал margin-left: 200px; с правой колонки и при изменении размера окна броузера блоки не рассыпались. тестировал на IE 6.0, Firefox 1.5
вернул margin-left: 200px; и убрал контейнер - в ИЕ блоки рассыпались
Птица
10.10.2006
Jock
11.10.2006
Влад Мержевич
13.10.2006
htmlbook.ru/content/?id=107
KarpEn
27.11.2006
Влад Мержевич
28.11.2006
Олег
20.01.2007
если нужно сгенерировать например в php набор элементов например в 3 столбца и в N строк, то данный метод очень даже удобен и легок по сравнению с таблицами.
moriarti
12.02.2007
Влад Мержевич
13.02.2007
Виталий
13.02.2007
тем более, что слои и таблицы не взаимозаменяемы! Лично я, примененяю слои в создании древовидной структуры пунктов меню, и динамически перемещающихся объектов, в сочетании с JavaScript, но не более, конечно кому как удобней.
А сайт действительно хорош, много полезных нюансов описывается, отсутствующих в других источниках. Автор достоен уважения!
M.org
20.03.2007
Юрий
23.03.2007
<div id="container">
<div id="leftcol"><p>...</p></div>
<div id="rightcol"><p>abc<br>abc<br>abc<br>abc</p></div>
</div>
Так что при фиксированном размере блоков правому, нужно обязательно указывать ширину, либо выбрать другой способ позиционирования блока(не float).
Читатель (Мас)
10.04.2007
dreamer
21.05.2007
) вОТ скоро выйдут новые стандарты css3, и тебе с таблицами - только в музей))oddhead
18.06.2007
У меня безо всяких margin'ов и с указанием всех ширин почему-то прекрасно работает без рассыпания во всех браузерах.
Что я делаю не так? (:
snigga
22.06.2007
Влад Мержевич
25.06.2007
step
26.06.2007
Влад Мержевич
27.06.2007
http://htmlbook.ru/css/float.html
http://htmlbook.ru/css/clear.html
step
27.06.2007
Ufon
18.07.2007
p {
padding: 10px; /* Поля вокруг текста */
margin: 0em /* Убираем отступы */
}
что за единица измирения em
паровоз
21.07.2007
Влад Мержевич
24.07.2007
em практически эквивалентен процентам в размерах шрифтов. В данном случае правильно писать просто margin: 0, без всяких единиц измерения.
Жук
09.08.2007
Жук
09.08.2007
Ivan
17.10.2007
Отличный сайт. Только основы и приемы верстки на CSS описаны, почему-то, в разделе СТАТЬИ. Я , когда грыз гранит HTML&CSS, дойдя до верстки на CSS, вынужден был искать информацию на эту тему на других сайтах и книгах, т.к. не мог и подумать, что Вы запихнете вс? это в раздел СТАТЬИ. Неудобно.
А по поводу этого примера, посмотрите результат в 9-й Опере. Это и есть, наверное, "Также наблюдаются небольшие различия в браузерах, связанные с полями и отступами вокруг текста, расположенного внутри колонок." . Как решать эту проблему?
shopox
06.02.2008