Schéma dvojstĺpcového layoutu stránky v CSS

Vytvorme dvojstĺpcový layout nasledujúceho vzhľadu:

Na začiatok vytvorme základnú štruktúru stránky:

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

Teraz priradíme wrapperu štýly, zarovnáme ho do stredu obrazovky:

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

Nastavme teraz štýly pre header a footer:

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

Ako vidíte, nastavujeme headeru a footeru výšku. Robíme to preto, lebo v našej schéme nemajú žiadny obsah. Ak by obsah mali, výšku by sme blokom nenastavovali - vytvorila by sa podľa ich obsahu.

Všimnite si tiež, že im nenastavujeme šírku. Dôvod je ten, že header a footer sú blokové elementy a ich šírka bude automaticky rovná šírke wrappera.

Dajme im teraz padding, aby text nepriľnul k okrajom:

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

Prítomnosť paddingu však zle ovplyvní veľkosti blokov - stanú sa väčšími, ako je uvedené. Zmeňme správanie všetkých blokov tak, aby padding a okraje nerozširovali naše bloky:

* {
	box-sizing: border-box;
}

Teraz potrebujeme umiestniť obsah a sidebar do jedného radu. Urobme to pomocou flexboxu:

#container {
	display: flex;
}

Určme obsahu a sidebaru ich šírku. Pri tom súčet ich šírok musí byť rovný šírke wrappera:

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

Povedzme, že chceme vytvoriť odstup medzi sidebarom a obsahom. V tomto prípade treba sidebaru nastaviť margin. Pri tom nám bude musieť od niekoho ubrať šírku pre tento margin. Uberme od obsahu, tým pádom zmenšíme jeho šírku:

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

Dajme teraz pridať výšku, pretože naše elementy neobsahujú žiadny obsah. Stačí pridať výšku len jednému elementu, pretože drujý flex element sa prispôsobí výške (prečo?). Dajme nastaviť výšku obsahu:

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

Dajme pridať obsahu a sidebaru zvyšné štýly:

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

Hotovo, náš layout je pripravený. Zhromaždime celý kód dokopy:

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