Shema dvostolpčne postavitve spletnega mesta v CSS

Ustvarimo dvostolpčno postavitev naslednje oblike:

Za začetek ustvarimo osnovno strukturo strani:

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

Zdaj določimo sloge ovojniku, tako da ga poravnamo na sredino zaslona:

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

Določimo zdaj sloge glavi in nogi:

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

Kot vidite, glavi in nogi določimo višino. To storimo, ker v naši shemi nimata vsebine. Če vsebina obstaja, višine blokom ne smemo določati - ta se bo oblikovala iz njune vsebine.

Pazite tudi na to, da jim ne določamo širine. Gre za to, da sta glava in noga blokovna elementa in njuna širina bo avtomatično enaka širini ovojnika.

Določimo zdaj padding, da besedilo ne bo lepilo na meje:

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

Prisotnost paddinga pa bo slabo vplivala na velikosti blokov - ti bodo postali večji, kot je navedeno. Spremenimo obnašanje vseh blokov tako, da padding in meje ne bodo širile naših blokov:

* {
	box-sizing: border-box;
}

Zdaj moramo vsebino in stransko vrstico postaviti v eno vrsto. Naredimo to s pomočjo flexboxa:

#container {
	display: flex;
}

Določimo vsebini in stranski vrstici njuno širino. Pri tem mora biti vsota njunih širin enaka širini ovojnika:

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

Recimo, da želimo narediti odmik med stransko vrstico in vsebino. V tem primeru je treba stranski vrstici določiti margin. Pri tem bomo morali od koga odšteti širino za ta margin. Odštejmo od vsebine, temu primerno zmanjšajmo njeno širino:

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

Dodajmo zdaj višino, saj naši elementi ne vsebujejo vsebine. Dovolj je dodati višino le enemu elementu, saj se bo drugi flex element prilagodil po višini (zakaj?). Določimo višino vsebini:

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

Dodajmo vsebini in stranski vrstici preostale sloge:

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

Vse, naša postavitev je pripravljena. Zberimo celotno kodo skupaj:

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