Схема двоколонкового макету сайту

Давайте зробимо двоколоночний макет наступного виду:

Для початку створимо основну структуру сторінки:

<div id="wrapper">
	<div id="header">
		header
	</div>
	<div id="container">
		<div id="content">
			content
		</div>
		<div id="sidebar">
			sidebar
		</div>
	</div>
	<div id="footer">
		footer
	</div>
</div>

Тепер призначимо стилі врапперу, вирівнявши його по центру екрану:

#wrapper {
	width: 1000px;
	margin: 30px auto;
	border: 1px solid black;
}

Задамо тепер стилі хедера та футера:

#header {
	height: 200px;
	border: 1px solid black;
}
#footer {
	height: 200px;
	border: 1px solid black;
}

Як ви бачите, ми задаємо хедеру та футеру висоту. Ми робимо це, тому що в нашій схемі у них немає вмісту. За наявності вмісту висоту блокам ставити не варто - вона буде формуватися їх вмістом.

Зверніть також увагу на те, що ми не задаємо їм ширину. Справа в тому, що хедер і футер - блокові елементи та їх ширина буде автоматично дорівнює ширині враппера.

Давайте тепер задамо їм педінг, щоб текст не прилипав до кордонів:

#header {
	height: 200px;
	padding: 20px;
	border: 1px solid black;
}
#footer {
	height: 200px;
	padding: 20px;
	border: 1px solid black;
}

Наявність педдингу, однак, погано вплине на розміри блоків - вони стануть більшими, ніж вказано. Давайте змінимо поведінку всіх блоків так, щоб педінг та кордони не розширювали наші блоки:

* {
	box-sizing: border-box;
}

Тепер нам потрібно поставити контент та сайдбар до одного ряду. Зробимо це за допомогою флексів:

#container {
	display: flex;
}

Вкажемо контенту і сайдбару їх ширину. При цьому сума їх ширин повинна дорівнювати ширині враппера:

#content {
	width: 800px;
}
#sidebar {
	width: 200px;
}

Нехай ми хочемо зробити відступ між сайдбаром та контентом. В цьому випадку сайдбару потрібно поставити марджин. При цьому нам доведеться від когось відщипнути ширину для цього марджину. Відщипнемо від контенту, відповідно зменшивши його ширину:

#content {
	width: 780px;
}
#sidebar {
	width: 200px;
	margin-right: 20px;
}

Давайте тепер додамо висоту, тому що наші елементи не містять вмісту. Достатньо додати висоту тільки одному елементу, адже другий флекс елемент підлаштовується по висоті (чому?). Давайте задамо висоту контенту:

#content {
	width: 780px;
	height: 700px;
}
#sidebar {
	width: 200px;
	margin-right: 20px;
}

Давайте додамо контенту та сайдбару інші стилі:

#content {
	width: 780px;
	height: 700px;
	padding: 20px;
	border: 1px solid black;
}
#sidebar {
	width: 200px;
	margin-right: 20px;
	padding: 20px;
	border: 1px solid black;
}

Все, наш макет готовий. Зберемо весь код разом:

<div id="wrapper">
	<div id="header">
		header
	</div>
	<div id="container">
		<div id="sidebar">
			sidebar
		</div>
		<div id="content">
			content
		</div>
	</div>
	<div id="footer">
		footer
	</div>
</div>

* {
	box-sizing: border-box;
}

#wrapper {
	width: 1000px;
	margin: 30px auto;
	border: 1px solid black;
}
#header {
	height: 200px;
	padding: 20px;
	border: 1px solid black;
}
#container {
	display: flex;
}
#content {
	width: 780px;
	height: 700px;
	padding: 20px;
	border: 1px solid black;
}
#sidebar {
	width: 200px;
	margin-right: 20px;
	padding: 20px;
	border: 1px solid black;
}
#footer {
	height: 200px;
	padding: 20px;
	border: 1px solid black;
}