Schema voor een tweekoloms lay-out van een website in CSS

Laten we een tweekoloms lay-out maken van het volgende type:

Laten we eerst de basisstructuur van de pagina maken:

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

Laten we nu stijlen toewijzen aan de wrapper, door deze te centreren op het scherm:

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

Laten we nu stijlen instellen voor de header en footer:

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

Zoals je ziet, geven we de header en footer een hoogte. We doen dit omdat er in ons schema geen inhoud in staat. Als er inhoud is, moet je de hoogte van de blokken niet instellen - deze wordt gevormd door hun inhoud.

Let ook op het feit dat we hun breedte niet instellen. Het ding is dat de header en footer blokelementen zijn en hun breedte zal automatisch gelijk zijn aan de breedte van de wrapper.

Laten we ze nu padding geven, zodat de tekst niet tegen de randen plakt:

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

De aanwezigheid van padding zal echter een slecht effect hebben op de grootte van de blokken - ze worden groter dan aangegeven. Laten we het gedrag van alle blokken veranderen zodat padding en randen onze blokken niet vergroten:

* {
	box-sizing: border-box;
}

Nu moeten we de content en sidebar op één regel zetten. Laten we dit doen met flexbox:

#container {
	display: flex;
}

Laten we de content en sidebar hun breedte specificeren. De som van hun breedtes moet gelijk zijn aan de breedte van de wrapper:

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

Stel dat we een spatie tussen de sidebar en de content willen maken. In dit geval moet de sidebar een margin krijgen. Hierdoor zullen we van iemand breedte moeten afnemen voor deze margin. Laten we dit van de content afnemen, door diens breedte dienovereenkomstig te verkleinen:

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

Laten we nu hoogte toevoegen, omdat onze elementen geen inhoud bevatten. Het is voldoende om alleen aan één element hoogte toe te voegen, want het tweede flex-element zal zich in hoogte aanpassen (waarom?). Laten we hoogte instellen voor de content:

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

Laten we de overige stijlen toevoegen aan de content en sidebar:

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

Klaar, onze lay-out is gereed. Laten we alle code samenvoegen:

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