Шема на дво-колонен распоред на веб-страница во 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;
}

Како што можете да видите, на header и footer им задаваме висина. Ова го правиме бидејќи во нашата шема тие немаат содржина. Доколку има содржина, не треба да се задава висина на блоковите - таа ќе се формира од нивната содржина.

Исто така, обрнете внимание на тоа што не им задаваме ширина. Работи така што header и footer се блок елементи и нивната ширина ќе биде автоматски еднаква на ширината на wrapper-от.

Ајде сега да им зададеме padding, за да не се лепи текстот до границите:

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

Сепак, присуството на padding, лошо ќе влијае на димензиите на блоковите - тие ќе станат поголеми, отколку што е наведено. Ајде да го промениме однесувањето на сите блокови така што padding и границите да не ги шират нашите блокови:

* {
	box-sizing: border-box;
}

Сега треба да го поставиме content и sidebar во еден ред. Ова ќе го направиме со помош на flex:

#container {
	display: flex;
}

Да ја наведеме ширината на content и sidebar. При тоа збирот на нивните ширини треба да биде еднаков на ширината на wrapper-от:

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

Да речеме дека сакаме да направиме оддалечување помеѓу sidebar и content. Во овој случај на sidebar треба да му се постави margin. При тоа ќе мораме од некој да одземеме ширина за овој margin. Да одземеме од content, соодветно намалувајќи ја неговата ширина:

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

Ајде сега да додадеме висина, бидејќи нашите елементи не содржат содржина. Доволно е да се додаде висина само на еден елемент, бидејќи вториот flex елемент ќе се прилагоди по висина (зошто?). Ајде да зададеме висина на content:

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

Ајде да ги додадеме на content и sidebar останатите стилови:

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