Шема двоколонског распореда сајта у CSS-у

Хајде да направимо двоколонски распоред следећег изгледа:

За почетак, креирајмо основну структуру странице:

<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), центрирајући га на екрану:

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

Поставимо сада стилове за заглавље (header) и подножје (footer):

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

Као што видите, задајемо заглављу и подножју висину. То радимо зато што у нашој шеми они немају садржај. Ако постоји садржај, висину блоковима није потребно задавати - формираће се аутоматски од њиховог садржаја.

Такође обратите пажњу на то да им не задајемо ширину. Разлог је у томе што су заглавље и подножје блок елементи и њихова ширина ће аутоматски бити једнака ширини омотача (wrapper).

Хајде сада да им задамо padding, како текст не би лепио за ивице:

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

Међутим, присуство padding-a ће лоше утицати на димензије блокова - постаће већи него што је наведено. Хајде да променимо понашање свих блокова тако да padding и ивице не проширују наше блокове:

* {
	box-sizing: border-box;
}

Сада треба да поставимо садржај (content) и бочну траку (sidebar) у један ред. Урадимо то помоћу флексова:

#container {
	display: flex;
}

Наведемо садржају и бочној траци њихову ширину. При томе збир њихових ширина мора бити једнак ширини омотача:

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

Рецимо да желимо да направимо размак између бочне траке и садржаја. У том случају бочној траци треба поставити margin. При томе ћемо морати од некога да "одгриземо" ширину за тај margin. Одгризимо од садржаја, односно смањимо његову ширину:

#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;
}