Для начала создаем документ и наполняем его всем чем нужно:
<html>
<head>
<title>2columnlayout</title>
<link rel="stylesheet" type="text/css" href="page.css" />
</head>
<body>
<div id="page">
<div id="header">Header</div>
<div id="content">
<div id="leftcol">Leftcol</div>
<div id="rightcol">Rightcol</div>
</div>
<div id="footer">Footer</div>
</div>
</body>
</html>
Как вы видите, мы создали элемент DIV с идентификатором(id) 'page' который включает в себя 'header', 'footer' и 'content'. Последний из перечисленных содержит 'leftcol' и 'rightcol'.
Если мы заглянем в шапку нашего документа, то увидим там ссылку на .css файл в котором мы будем описывать все стили.
Начнем с того, что обнулим внешние и внутренние отступы для всех элементов. Делайте это всегда чтобы избежать непоняток где-то в разгаре вашей верстки.
* {
margin:0;
padding:0;
}
Теперь опишем стили для нашей страницы. Сделаем так, чтобы она распологалась посередине и занимала 60% браузера по ширине.#page { margin:0 20%;С хедером все просто. Чтобы увидеть облась которую он занимает, ставим цвет фона и высоту 50 пикселей.#header { background:darkcyan; height:50px; }
Контент оставляем такой какой есть.#content { }
Вот мы и добрались до наших колонок. Поскольку мы верстаем элементами DIV которые являются блочными, (содержимое тега DIV всегда начинается с новой строки. После него также добавляется перенос строки.) следует выравнить левую колонку по левой стороне используя float.#leftcol {
background-color: blue;
width:200px;
float:left;
height:300px;
}
Чтобы правая колонка встала на один и тот же уровень с левой, ставим ей левый внешний отсуп шириной равной ширине левой колонки - 200 пикселей.#rightcol {
background-color:
blueviolet;
margin-left:200px;
height:200px;
}
А теперь завершающий шаг. С помощью свойства clear можно запретить обтекание другими элементами нашего футера. Конечно, если высота колонок будет явно указана и будет одинаковой, это необязательно. Но если она будет тянуться автоматически, стоит проделать этот шаг. Иначе получится что-то вроде этого:
Применяем свойство clear к нашему футеру:
#footer { clear:both; background:aqua; height:50px; }
Двухколоночный шаблон готов.
Комментариев нет:
Отправить комментарий