Sơ đồ bố cục hai cột của trang web trong CSS

Hãy tạo một bố cục hai cột có dạng như sau:

Đầu tiên, hãy tạo cấu trúc chính của trang:

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

Bây giờ hãy áp dụng kiểu cho wrapper, căn giữa nó trên màn hình:

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

Bây giờ hãy đặt kiểu cho header và footer:

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

Như bạn thấy, chúng ta đặt chiều cao cho header và footer. Chúng ta làm vậy vì trong sơ đồ của chúng, chúng không có nội dung. Nếu có nội dung thì không nên đặt chiều cao cho các khối - chiều cao sẽ được hình thành từ nội dung của chúng.

Cũng lưu ý rằng chúng ta không đặt chiều rộng cho chúng. Lý do là header và footer là các phần tử khối và chiều rộng của chúng sẽ tự động bằng chiều rộng của wrapper.

Bây giờ hãy đặt padding cho chúng để văn bản không dính vào đường viền:

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

Tuy nhiên, việc có padding sẽ ảnh hưởng xấu đến kích thước của các khối - chúng sẽ trở nên lớn hơn mức được chỉ định. Hãy thay đổi hành vi của tất cả các khối sao cho padding và đường viền không mở rộng các khối của chúng ta:

* {
	box-sizing: border-box;
}

Bây giờ chúng ta cần đặt nội dung và sidebar trên cùng một hàng. Hãy thực hiện điều này bằng flex:

#container {
	display: flex;
}

Hãy chỉ định chiều rộng cho nội dung và sidebar. Trong đó, tổng chiều rộng của chúng phải bằng chiều rộng của wrapper:

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

Giả sử chúng ta muốn tạo khoảng cách giữa sidebar và nội dung. Trong trường hợp này, cần đặt margin cho sidebar. Đồng thời, chúng ta sẽ phải lấy bớt chiều rộng từ một phần tử nào đó cho margin này. Hãy lấy từ phần nội dung, tương ứng với việc giảm chiều rộng của nó:

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

Bây giờ hãy thêm chiều cao, vì các phần tử của chúng ta không chứa nội dung. Chỉ cần thêm chiều cao cho một phần tử là đủ, vì phần tử flex thứ hai sẽ điều chỉnh theo chiều cao (tại sao?). Hãy đặt chiều cao cho phần nội dung:

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

Hãy thêm các kiểu còn lại cho nội dung và sidebar:

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

Vậy là bố cục của chúng ta đã hoàn thành. Hãy tổng hợp toàn bộ mã lại với nhau:

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