Skema Tata Letak dengan Beberapa Wrapper di CSS

Seringkali dalam pengembangan, ditemui tata letak di mana blok memiliki latar belakang selebar halaman, sedangkan konten blok-blok tersebut berada di tengah. Berikut contoh tata letak seperti itu:

Dalam tata letak seperti ini, kita harus membuat tidak hanya satu wrapper, tetapi beberapa - untuk setiap blok. Di dalam wrapper harus ada lagi blok lain yang melakukan penempatan konten di tengah. Juga harus ada kelas yang bertanggung jawab untuk memberi warna pada konten dengan latar belakang.

Skema umum tata letak kita akan terlihat seperti berikut:

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

Kelas center akan digunakan untuk menempatkan blok di tengah:

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

Kelas line akan digunakan untuk mewarnai blok:

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

Dan kelas wrapper akan menjadi induk dari setiap blok. Kita akan menggunakannya untuk memberikan jarak antar blok:

.wrapper {
	margin-bottom: 30px;
}

Sekarang mari kita tulis kode lengkap untuk tugas kita:

<div class="wrapper">
	<div class="center">
		<h1>Judul situs utama</h1>
	</div>
</div>
<div class="wrapper line">
	<div class="center">
		<h2>Perusahaan kami</h2>
		<p>
			...
		</p>
		<p>
			...
		</p>
	</div>
</div>
<div class="wrapper">
	<div class="center">
		<h2>Harga kami</h2>
		<p>
			...
		</p>
		<p>
			...
		</p>
	</div>
</div>
<div class="wrapper line">
	<div class="center">
		<h2>Kontak kami</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;
}