Сейчас мы с вами разберемся с популярными схемами построения многоколоночных макетов.

Видео про многоколоночные макеты

Посмотрите следующее видео из заочного курса: скачайте его по данной ссылке.

Изучите современные теги HTML5 для макетов

В HTML5 были добавлены новые теги, представляющие собой отдельные блоки макета сайта, которые раньше делались на тегах div и имели более-менее стандартные названия. Это такие блоки как хедер (header), контент (content), сайдбар (sidebar), футер (footer). Для этих блоков были соответственно добавлены теги header, main (контент), aside (сайдбар), footer.

Был также добавлен новый тег nav для меню (аналог <div id="menu">).

Рекомендую также посмотреть новые теги section и article, которые задают разделы документа.

Схемы для справки

Ниже расположены схемы, о которых я рассказываю в видео, чтобы вам не приходилось их пересматривать.

Двухколночный макет на флоатах

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Это заголовок тайтл</title>
	</head>
	<body>
		<div id="wrapper">
			<div id="header">
				Верхняя часть сайта.
			</div>

			<div id="sidebar">
				Боковая часть сайта.
			</div>

			<div id="content">
				Основная часть сайта.
			</div>

			<div class="clearfix"></div>

			<div id="footer">
				Нижняя часть сайта.
			</div>
		</div>
	</body>
</html>
#wrapper {
	width: 1000px;
	margin: 10px auto;
}

#sidebar {
	width: 300px;
	float: left;
}

#content {
	width: 700px;
	float: left;
}

#header, #content, #sidebar, #footer {
	outline: 1px solid red;
}

Трехколоночный макет, сайдбары и контент на флоатах

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Это заголовок тайтл</title>
	</head>
	<body>
		<div id="wrapper">
			<div id="header">
				Верхняя часть сайта.
			</div>

			<div id="left">
				Левый сайдбар.
			</div>

			<div id="content">
				Основная часть сайта.
			</div>

			<div id="right">
				Правый сайдбар.
			</div>

			<div class="clearfix"></div>

			<div id="footer">
				Нижняя часть сайта.
			</div>
		</div>
	</body>
</html>
#wrapper {
	width: 1100px;
	margin: 10px auto;
}

#left {
	width: 200px;
	float: left;
}

#right {
	width: 200px;
	float: left;
}

#content {
	width: 700px;
	float: left;
}

#header, #content, #left, #right, #footer {
	outline: 1px solid red;
}

Трехколоночный схема на margin

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Это заголовок тайтл</title>
	</head>
	<body>
		<div id="wrapper">
			<div id="header">
				Верхняя часть сайта.
			</div>

			<div id="left">
				Левый сайдбар.
			</div>

			<div id="right">
				Правый сайдбар.
			</div>

			<div id="content">
				Основная часть сайта.
			</div>

			<div class="clearfix"></div>

			<div id="footer">
				Нижняя часть сайта.
			</div>
		</div>
	</body>
</html>
#wrapper {
	width: 1100px;
	margin: 10px auto;
}

#left {
	width: 200px;
	float: left;
}

#right {
	width: 200px;
	float: right;
}

#content {
	margin-left: 200px;
	margin-right: 200px;
}

#header, #content, #left, #right, #footer {
	outline: 1px solid red;
}