Двухколоночный макет сайта
Сегодня я бы хотел Вам показать, как можно создать двухколоночный макет сайта, где левая часть сайта является фиксированной, а правая часть резиновая. В дальнейшем Вы просто можете скопировать данную структуру и, опираясь на нее, начать создавать свой сайт. А мы начинаем с html разметки.
<html>
<head>
<title>Двухколоночный макет</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
</head>
<body>
<div id="header">
<h1>Шапка сайта</h1>
</div>
<div id="menu">
<h2>Меню</h2>
</div>
<div id="content">
Шапка сайта
</div>
</body>
</html>
Реализуем двухколоночную структуру сайта:
body {
margin: 0 auto;
min-width: 700px;
max-width: 1000px;
}
#header {
background: #fdd;
text-align: center;
}
#menu {
background: #aaa;
float: left;
width: 200px;
}
#content {
background: #aaa;
margin-left: 220px;
}
Результат будет следующим, но я попросил бы Вас, чтобы Вы не смотрели на эту картинку, а написали данный код у себя.
Мы создали три блока, каждый из которых отвечает за находящееся в нем содержимое и при помощи css стилей реализовали данную структуру, которая является вполне пригодной для дальнейшего создания сайта. Первое, что мы сделали - это выровняли все содержимое по центру и установили для него минимальную и максимальную ширину. Благодаря данным стилям, наше содержимое, находящееся в теге body будет всегда выровнено по центру, и не будет меньше или больше указанной ширины. Для шапки сайта был задан цвет фона, а также задано выравнивание текста по центру, что и унаследовал тег заголовка h1. С левой колонкой также все довольно просто, задаем цвет фона, фиксированную ширину, и устанавливаем, чтобы элемент выравнивался по левой стороне, а остальные элементы его обтекали справа, таким образом, блок с контентом уходит в правую сторону. И для блока с контентом также задается цвет фона и отступ слева, который немного больше ширины блока меню, для того чтобы они не сливались вместе, а было свободное пространство. Вот таким простым способом можно реализовать двухколоночную структуру сайта. Всего доброго!
