Oppsett for to-spaltet nettstedsoppbygging i CSS

La oss lage en to-spaltet oppbygging av følgende type:

La oss først opprette hovedstrukturen til siden:

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

La oss nå tildele stiler til wrapperen, og sentrere den på skjermen:

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

La oss nå sette stiler for header og footer:

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

Som du ser, setter vi høyde på header og footer. Dette gjør vi fordi de ikke har noe innhold i vårt oppsett. Hvis de hadde hatt innhold, bør man ikke sette høyde på blokkene - høyden vil da bli bestemt av innholdet.

Legg også merke til at vi ikke setter bredde på dem. Grunnen er at header og footer er blokkelementer, og bredden deres vil automatisk bli lik bredden til wrapperen.

La oss nå sette padding på dem, slik at teksten ikke støter mot kantene:

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

Men tilstedeværelsen av padding vil påvirke størrelsene på blokkene negativt - de vil bli større enn oppgitt. La oss endre oppførselen til alle blokkene slik at padding og rammer ikke utvider våre blokker:

* {
	box-sizing: border-box;
}

Nå må vi plassere innhold og sidefelt på samme rad. La oss gjøre dette ved hjelp av flexbox:

#container {
	display: flex;
}

La oss angi bredden på innhold og sidefelt. Summen av breddene deres bør være lik bredden til wrapperen:

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

La oss si at vi vil ha et mellomrom mellom sidefeltet og innholdet. I dette tilfellet må vi sette margin på sidefeltet. Da må vi ta bredden for denne marginen fra noen. La oss ta den fra innholdet, og dermed redusere bredden:

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

La oss nå legge til høyde, ettersom våre elementer ikke har noe innhold. Det er nok å legge til høyde bare til ett element, fordi det andre flex-elementet vil tilpasse seg høyden (hvorfor?). La oss sette høyde på innholdet:

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

La oss legge til de resterende stilene for innhold og sidefelt:

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

Alt, oppsettet vårt er klart. La oss samle all 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;
}