Shema dvokolonačnog izgleda sajta u CSS-u

Hajde da napravimo dvokolonačni izgled sledećeg izgleda:

Za početak, napravićemo osnovnu strukturu stranice:

<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>

Sada ćemo dodeliti stilove wrapper-u, poravnavajući ga po centru ekrana:

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

Hajde sada da postavimo stilove za header i footer:

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

Kao što vidite, dodeljujemo header-u i footer-u visinu. Ovo radimo zato što u našoj šemi oni nemaju sadržaj. U prisustvu sadržaja ne treba zadavati visinu blokovima - ona će se formirati na osnovu njihovog sadržaja.

Obratite takođe pažnju na to da im ne dodeljujemo širinu. Stvar je u tome što su header i footer blok elementi i njihova širina će automatski biti jednaka širini wrapper-a.

Hajde sada da im dodelimo padding, kako tekst ne bi lepio za ivice:

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

Prisustvo padding-a, međutim, loše će uticati na dimenzije blokova - oni će postati veći nego što je navedeno. Hajde da promenimo ponašanje svih blokova tako da padding i ivice ne proširuju naše blokove:

* {
	box-sizing: border-box;
}

Sada treba da postavimo sadržaj i sidebar u jedan red. Uradićemo to pomoću flex-a:

#container {
	display: flex;
}

Navedimo sadržaju i sidebar-u njihovu širinu. Pri tome zbir njihovih širina treba da bude jednak širini wrapper-a:

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

Recimo da želimo da napravimo razmak između sidebar-a i sadržaja. U tom slučaju sidebar-u treba postaviti margin. Pri tome moraćemo od nekoga da odvojimo širinu za ovaj margin. Odvojimo od sadržaja, odnosno smanjimo njegovu širinu:

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

Hajde sada da dodamo visinu, pošto naši elementi ne sadrže sadržaj. Dovoljno je dodati visinu samo jednom elementu, jer će se drugi flex element prilagoditi po visini (zašto?). Hajde da dodelimo visinu sadržaju:

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

Hajde da dodamo sadržaju i sidebar-u ostale stilove:

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

Sve, naš izgled je spreman. Hajde da spojimo ceo kod zajedno:

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