Divkolonnu mājaslapas maketa shēma CSS

Izveidosim divkolonnu maketu šādā veidā:

Vispirms izveidosim lapas pamatstruktūru:

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

Tagad piešķirsim stilu ietverim, izlīdzinot to ekrāna centrā:

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

Tagad piešķirsim stilu galvene un kājenei:

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

Kā redzat, mēs iestatām galvene un kājenei augstumu. Mēs to darām, jo mūsu shēmā viņiem nav satura. Ja saturs ir, tad blokiem augstumu iestatīt nevajadzētu - to veidos to saturs.

Ievērojiet arī to, ka mēs neiestatām tiem platumu. Tas ir tāpēc, ka galvene un kājene ir bloka elementi, un to platums būs automātiski vienāds ar ietvera platumu.

Tagad iestatīsim tiem padding, lai teksts neliptu pie malām:

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

Tomēr padding klātbūtne negatīvi ietekmēs bloku izmērus - tie kļūs lielāki nekā norādīts. Mainīsim visu bloku uzvedību tā, lai padding un apmales nepaplašinātu mūsu blokus:

* {
	box-sizing: border-box;
}

Tagad mums jānovieto saturs un sānjosla vienā rindā. Izdarīsim to, izmantojot flexbox:

#container {
	display: flex;
}

Norādīsim saturam un sānjoslai to platumu. To platumu summai jābūt vienādai ar ietvera platumu:

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

Pieņemsim, ka mēs vēlamies izveidot atstarpi starp sānjoslu un saturu. Šajā gadījumā sānjoslai ir jāiestata margin. Tajā pašā laikā mums būs no kā atņemt platumu šim margin. Atņemsim no satura, attiecīgi samazinot tā platumu:

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

Tagad pievienosim augstumu, jo mūsu elementi nesatur saturu. Pietiek pievienot augstumu tikai vienam elementam, jo otrais flex elements pielāgosies augstumā (kāpēc?). Iestatīsim augstumu saturam:

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

Pievienosim saturam un sānjoslai pārējos stilus:

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

Viss, mūsu makets ir gatavs. Apvienosim visu kodu kopā:

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