Kahe veeru veebilehe maketi skeem CSS-is

Teeme kahe veeru maketi järgmisel kujul:

Alustuseks loome lehe põhistruktuuri:

<div id="wrapper">
	<div id="header">
		päis
	</div>
	<div id="container">
		<div id="content">
			sisu
		</div>
		<div id="sidebar">
			külgriba
		</div>
	</div>
	<div id="footer">
		jalus
	</div>
</div>

Nüüd määrame wrapperile stiilid, joondades selle ekraani keskele:

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

Määrame nüüd päise ja jala stiilid:

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

Nagu näete, määrame päisele ja jalale kõrguse. Teeme seda, kuna meie skeemis neil pole sisu. Kui sisu on olemas, ei peaks plokkidele kõrgust määrama - see kujuneks nende sisust.

Pange tähele ka seda, et me ei määra neile laiust. Asi on selles, et päis ja jalus on plokielemendid ja nende laius on automaatselt võrdne wrapperi laiusega.

Määrame neile nüüd padding, et tekst ei kleepuks piirjoonte külge:

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

padding olemasolu aga mõjutab plokkide suurusi halvasti - need muutuvad suuremaks kui määratud. Muudame kõigi plokkide käitumist nii, et padding ja piirjooned ei suurendaks meie plokke:

* {
	box-sizing: border-box;
}

Nüüd peame sisu ja külgriba paigutama ühte ritta. Teeme selle flexboxi abil:

#container {
	display: flex;
}

Määrame sisule ja külgribale nende laiuse. Sel juhul peaks nende laiuste summa olema võrdne wrapperi laiusega:

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

Oletame, et tahame teha vahet külgriba ja sisu vahele. Sel juhul tuleb külgribale määrata margin. Sel juhul peame kellegilt näpistama laiust selle margin jaoks. Näpistame sisult, vähendades vastavalt selle laiust:

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

Lisame nüüd kõrguse, kuna meie elemendid ei sisalda sisu. Piisab kõrguse lisamisest ainult ühele elemendile, sest teine flex element kohandub kõrgusega (miks?). Määrame kõrguse sisule:

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

Lisame nüüd sisule ja külgribale ülejäänud stiilid:

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

Kõik, meie makett on valmis. Kogume kogu kood kokku:

<div id="wrapper">
	<div id="header">
		päis
	</div>
	<div id="container">
		<div id="sidebar">
			külgriba
		</div>
		<div id="content">
			sisu
		</div>
	</div>
	<div id="footer">
		jalus
	</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;
}