Skema Layout Dua Kolom Situs dalam CSS

Mari kita buat layout dua kolom dengan jenis berikut:

Pertama, mari buat struktur halaman utama:

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

Sekarang atur gaya untuk wrapper, dengan membuatnya rata tengah layar:

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

Sekarang atur gaya untuk header dan footer:

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

Seperti yang Anda lihat, kita mengatur tinggi header dan footer. Kita melakukan ini karena dalam skema kita, mereka tidak memiliki konten. Jika ada konten, sebaiknya tidak mengatur tinggi blok - tinggi akan dibentuk oleh kontennya.

Perhatikan juga bahwa kita tidak mengatur lebarnya. Hal ini karena header dan footer adalah elemen blok dan lebarnya secara otomatis sama dengan lebar wrapper.

Sekarang mari berikan mereka padding agar teks tidak menempel ke batas:

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

Namun, keberadaan padding akan berpengaruh buruk pada ukuran blok - mereka akan menjadi lebih besar dari yang ditentukan. Mari ubah perilaku semua blok sehingga padding dan batas tidak memperlebar blok kita:

* {
	box-sizing: border-box;
}

Sekarang kita perlu menempatkan konten dan sidebar dalam satu baris. Mari lakukan ini dengan menggunakan flex:

#container {
	display: flex;
}

Tentukan lebar untuk konten dan sidebar. Jumlah lebar mereka harus sama dengan lebar wrapper:

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

Katakanlah kita ingin membuat jarak antara sidebar dan konten. Dalam hal ini, sidebar perlu diberi margin. Pada saat yang sama, kita harus mengambil lebar dari seseorang untuk margin ini. Mari ambil dari konten, dengan demikian mengurangi lebarnya:

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

Sekarang mari tambahkan tinggi, karena elemen kita tidak mengandung konten. Cukup menambahkan tinggi hanya ke satu elemen, karena elemen flex kedua akan menyesuaikan tingginya (mengapa?). Mari atur tinggi untuk konten:

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

Mari tambahkan gaya lainnya untuk konten dan sidebar:

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

Semua, layout kita selesai. Mari kumpulkan semua kodenya bersama-sama:

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