Layoutskjema med flere wrappere i CSS

Ofte under utvikling møter man layouter, der blokkene har bakgrunn over hele sidens bredde, og innholdet i disse blokkene er sentrert. Her er et eksempel på en slik layout:

I en slik layout må vi lage ikke én wrapper, men flere - for hver blokk. Samtidig må det inne i wrapperen være en annen blokk som utfører sentrering av innholdet. Det må også være en klasse som er ansvarlig for å fargelegge innholdet med bakgrunn.

Det generelle skjemaet for layouten vår vil se slik ut:

<div class="wrapper">
	<div class="center">
		
	</div>
</div>
<div class="wrapper line">
	<div class="center">
		
	</div>
</div>
<div class="wrapper">
	<div class="center">
		
	</div>
</div>
<div class="wrapper line">
	<div class="center">
		
	</div>
</div>

Klassen center vil bli brukt for å sentrere blokker:

.center {
	width: 800px;
	padding: 20px;
	margin: 0 auto;
}

Klassen line vil bli brukt for å fargelegge blokker:

.wrapper.line {
	background-color: #008040;
	color: white;
}

Og klassen wrapper vil være forelder til hver blokk. Vi bruker den for å sette avstand mellom blokkene:

.wrapper {
	margin-bottom: 30px;
}

La oss nå skrive fullstendig kode for oppgaven vår:

<div class="wrapper">
	<div class="center">
		<h1>Main site header</h1>
	</div>
</div>
<div class="wrapper line">
	<div class="center">
		<h2>Our company</h2>
		<p>
			...
		</p>
		<p>
			...
		</p>
	</div>
</div>
<div class="wrapper">
	<div class="center">
		<h2>Our price</h2>
		<p>
			...
		</p>
		<p>
			...
		</p>
	</div>
</div>
<div class="wrapper line">
	<div class="center">
		<h2>Our contacts</h2>
		<p>
			...
		</p>
		<p>
			...
		</p>
	</div>
</div>

* {
	box-sizing: border-box;
}
body {
	margin: 0;
}

.wrapper {
	margin-bottom: 30px;
}
.wrapper.line {
	background-color: #008040;
	color: white;
}
.center {
	width: 800px;
	padding: 20px;
	margin: 0 auto;
}
.wrapper h1 {
	margin: 0;
	font: 40px "Times New Roman";
}
.wrapper h2 {
	margin: 0;
	font: 25px "Times New Roman";
}
.wrapper p {
	font: 16px/1.4 Arial;
	text-align: justify;
}