Читайте также:
|
<!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).
Дата добавления: 2015-08-20; просмотров: 56 | Нарушение авторских прав
| <== предыдущая страница | | | следующая страница ==> |
| Пример 1. Добавление свойства float | | | Пример 3. Применение свойства clear |