Schema för tvåkolumns layout av webbplats i CSS

Låt oss skapa en tvåkolumns layout av följande typ:

Först skapar vi sidans grundläggande 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>

Nu tilldelar vi stilarna till wrappern, genom att centrera den på skärmen:

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

Låt oss nu ange stilarna för headern och footern:

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

Som du ser sätter vi en höjd för headern och footern. Vi gör detta eftersom de inte har något innehåll i vårt schema. Om det finns innehåll bör höjden inte sättas för blocken - den kommer att formas av deras innehåll.

Notera också att vi inte sätter en bredd för dem. Anledningen är att headern och footern är blockelement och deras bredd automatiskt kommer att vara lika med wrapperns bredd.

Låt oss nu ge dem padding, så att texten inte sitter i kanten:

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

Närvaron av padding kommer dock att påverka blockens storlek negativt - de kommer att bli större än angivet. Låt oss ändra beteendet för alla block så att padding och kanter inte utökar våra block:

* {
	box-sizing: border-box;
}

Nu behöver vi placera innehållet och sidofältet i en rad. Vi gör detta med flex:

#container {
	display: flex;
}

Låt oss ange bredden för innehållet och sidofältet. Summan av deras bredder bör vara lika med bredden på wrappern:

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

Låt oss säga att vi vill ha ett mellanrum mellan sidofältet och innehållet. I detta fall behöver vi sätta margin på sidofältet. Då måste vi ta bredden för denna margin från någon. Låt oss ta den från innehållet, genom att motsvarande minska dess bredd:

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

Låt oss nu lägga till höjd, eftersom våra element inte innehåller något innehåll. Det räcker att lägga till höjd bara till ett element, eftersom det andra flexelementet kommer att anpassa sig i höjd (varför?). Låt oss sätta höjd på innehållet:

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

Låt oss lägga till resten av stilarna för innehållet och sidofältet:

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

Klart, vår layout är färdig. Låt oss samla all kod tillsammans:

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