CSS-də iki sütunlu sayt maketinin sxemi

Gəlin aşağıdakı növ iki sütunlu maket edək:

Əvvəlcə səhifənin əsas quruluşunu yaradaq:

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

İndi qabığa (wrapper) stil təyin edək, onu ekranın mərkəzinə yerləşdirək:

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

İndi header və footer üçün stillər təyin edək:

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

Gördüyünüz kimi, biz header və footer-ə hündürlük təyin edirik. Biz bunu ona görə edirik ki, bizim sxemdə onların məzmunu yoxdur. Məzmun olduqda hündürlüyü bloklara təyin etmək lazım deyil - o onların məzmunu ilə formalaşacaq.

Həmçinin diqqət edin ki, biz onlara en təyin etmirik. Məsələ burundadır ki, header və footer - blok elementlərdir və onların eni avtomatik olaraq qabığın eninə bərabər olacaq.

Gəlin indi onlara padding təyin edək, belə ki, mətn sərhədlərə yapışmasın:

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

Ancaq padding-in olması blokların ölçülərinə pis təsir edəcək - onlar göstəriləndən daha böyük olacaq. Gəlin bütün blokların davranışını dəyişək belə ki, padding və sərhədlər bizim bloklarımızı genişləndirməsin:

* {
	box-sizing: border-box;
}

İndi bizə content və sidebar-i bir sıraya qoymaq lazımdır. Bunu flekslərlə edək:

#container {
	display: flex;
}

Content və sidebar-ə onların enini göstərək. Bununla onların enlərinin cəmi qabığın eninə bərabər olmalıdır:

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

Tutaq ki, biz sidebar və content arasında boşluq etmək istəyirik. Bu halda sidebar-ə margin qoymaq lazımdır. Bununla biz bu margin üçün eni kimsədən qoparmağa məcbur olarıq. Content-dən qoparaq, müvafiq olaraq onun enini azaldaq:

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

Gəlin indi hündürlük əlavə edək, çünki bizim elementlərimiz məzmun saxlamır. Kifayətdir hündürlüyü yalnız bir elementə əlavə etmək, çünki ikinci fleks elementi hündürlüyə uyğunlaşacaq (niyə?). Gəlin hündürlüyü content-ə təyin edək:

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

Gəlin content və sidebar-ə qalan stilləri əlavə edək:

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

Hamısı, bizim maketimiz hazırdır. Bütün kodu birlikdə yığaq:

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