Skema for en to-kolonne webside layout i CSS

Lad os lave en to-kolonne layout af følgende slags:

Til at starte med, lad os oprette sidens grundlæggende struktur:

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

Lad os nu tildele styles til wrapperen og centrere den på skærmen:

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

Lad os nu definere styles til header og footer:

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

Som du kan se, giver vi headeren og footeren en højde. Vi gør dette fordi der ikke er noget indhold i dem i vores skema. Hvis der var indhold, skulle man ikke angive højden på blokkene - den ville blive dannet af deres indhold.

Læg også mærke til, at vi ikke angiver deres bredde. Grunden er, at headeren og footeren er blokelementer, og deres bredde vil automatisk være lig med wrapperens bredde.

Lad os give dem padding, så teksten ikke klistrer til kantene:

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

Tilstedeværelsen af padding vil dog påvirke blokkenes størrelse negativt - de vil blive større end angivet. Lad os ændre adfærd for alle blokke, så padding og kanter ikke udvider vores blokke:

* {
	box-sizing: border-box;
}

Nu er vi nødt til at placere indholdet og sidebar'en på samme række. Lad os gøre dette ved hjælp af flex:

#container {
	display: flex;
}

Lad os angive indholdets og sidebar'ens bredde. Summen af deres bredder skal være lig med wrapperens bredde:

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

Lad os sige, at vi vil have en afstand mellem sidebar'en og indholdet. I dette tilfælde skal sidebar'en have margin. I dette tilfælde bliver vi nødt til at tage bredden for denne margin fra nogen. Lad os tage den fra indholdet, og dermed reducere dets bredde:

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

Lad os nu tilføje højde, da vores elementer ikke indeholder indhold. Det er nok at tilføje højde til kun ét element, fordi det andet flex-element vil tilpasse sig i højden (hvorfor?). Lad os give indholdet en højde:

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

Lad os tilføje de resterende styles til indholdet og sidebar'en:

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

Alt er klart, vores layout er færdigt. Lad os samle al koden:

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