CodeSweet | Способы верстки двухколоночных макетов, примеры

Сегодня рассмотрим двухколоночный макет сайта. Страница будет состоять из шапки, ниже контентная часть с двумя колонками, еще ниже — футер. Верстать будем дивами (HTML5 я думаю буду рассматривать в другой статье, поэтому сейчас перейдем непосредственно к вариантам блочных макетов с помощью <div>.) Макет будет фиксированной ширины, но в принципе это не так важно, ширину в процентах(резиновую) никто не отменял.

Двухколоночный макет с заданием ширины для обоих колонок

Для начала сделаем разметку. Шапка, футер, сайдбар и контентная часть.

<html>
	<head>
		<title>Пример блочной верстки</title>
	</head>
	<body>
		<div id="wrapper">
			<div class="header"><h1>Шапка сайта</h1></div>
			<div class="content">
				<div class="left_col">
					<h2>Сайдбар</h2>
				</div>
				<div class="right_col">
					<h2>Контентная часть</h2>
					<p>Верстка макета фиксированной ширины в две колонки</p>
				</div>
			</div>
			<div class="footer"><p>© 2010</p></div>
		</div>
	</body>
</html>

Теперь добавим CSS правила для нашего макета.


#wrapper {
	width: 1200px;
	margin: 0 auto;
	background: #ccc;
}
.header {
	height:80px;
	background: #ff0000
}
.content:after,
.content:before{
	content: ' ';
	display: table;
}
.content:after{
	clear: both;
}
.left_col {
	width: 25%;
	height:350px;
	float:left;
}
.right_col {
	width: 75%;
	float:left
}
.footer {
	height: 80px;
	background: #ff0000;
}

Основные моменты: для .content блока мы применили новомодное очищение потока (чтоб его высота не «схлопнулась» в 0), а внутри него вложили два блока с float: left; — сайдбар (шириной в 25% от родительского) и собственно контент (шириной 75% от родительского). Ширины естественно можно задавать и в пикселях (напомним, что у нас фиксированный макет шириной 1200 пикселей).

Собственно есть второй способ создания двухколоночного макета. Разметка от первого способа не будет отличаться, а вот CSS будет несколько другой.

Двухколоночный макет с заданием ширины только для левой колонки.


#wrapper {
	margin: 0 auto;
	background: #ccc;
}
.header {
	height:80px;
	background: #ff0000
}
.content:after,
.content:before{
	content: ' ';
	display: table;
}
.content:after{
	clear: both;
}
.left_col {
	width: 25%;
	height:350px;
	float:left;
}
.right_col {
	margin-right: 25%;
	float:left
}
.footer {
	height: 80px;
	background: #ff0000;
}

Собственно, отличие только в том, что для правой колонки мы не задаем ширину, а делаем отступ справа размером в ширину левой колонки. Отличий от первого варианта не много. Пожалуй, единственное отличие — если правая колонка намного длиннее левой (много контента), то она не будет «обтекать» левую, и, соответственно, контент не полезет на пустое место под сайдбаром.

Есть еще более хитрый способ задания двухколоночного макета, в котором вместо float: left; используется display: inline-block; Этот способ очень любит мой давний друг, поэтому сейчас мы его распишем.

Двухколоночный макет с помощью инлайн-блочных элементов

Разметка, собственно остается все та же, меняем только CSS правила


#wrapper {
	width: 1200px;
	margin: 0 auto;
	background: #ccc;
	font-size: 14px;
}
.header {
	height:80px;
	background: #ff0000
}
.content{
	font-size: 0;
}
.left_col {
	width: 25%;
	display: inline-block;
	font-size: 14px;
}
.right_col {
	width: 75%;
	display: inline-block;
	font-size: 14px;
}
.footer {
	width: 1200px;
	height: 80px;
	background: #ff0000;
}

Отличия от предыдущих макетов в том, что нашим колонкам необходимо задать display: inline-block; и убрать float: left; Благодаря тому что у нас нет «плавающих» блоков — нужда в очищении потока пропадает. Зато появляется геморрой с размерами шрифта. В чем соль — если для наших инлайн-блочных блоков не поставить font-size: 0; для родителя, то между левой и правой колонкой появится небольшой, но мерзкий пробел. И при ширине первой колонки в 25% а правой — в 75% колонки будут находиться не рядом, как это предполагалось, а съедут друг под друга.

Внутри же каждой из колонок следует вновь восстановить стандартные font-size: 14px; (в моем случае)