CSSтеги эки тилкемдүү сайт макетинин схемасы

Келгиле, төмөнкүдөй эки тилкемдүү макетти жасайлы:

Алгач, барактын негизги түзүлүшүн түзөлү:

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

Эми wrapper'ге стилдерди тагайбыз, аны экрандын борборуна тууралайбыз:

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

Эми header жана footer'ге стилдерди белгилейли:

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

Көрүп турганыңыздай, биз header жана footer'ге бийиктикти тагабыз. Биз муну буюмдарыбызда мазмун жок болгондукка жасайбыз. Эгер мазмун болсо, блокторго бийиктикти тагуунун кажети жок - ал алардын мазмуну тарабынан түзүлөт.

Ошондой эле, биз аларга туурасын бербейбиз. Себеби, header жана footer - блочтук элементтер жана алардын туурасы wrapper'дин туурасына автоматтык түрдө барабар болот.

Эми аларга padding тагалы, текст чектерге жабышпасын:

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

Бирок, padding болушу блоктордун өлчөмүнө жаман таасир тийгизет - алар көрсөтүлгөнөн чоңураак болуп калат. Келгиле, бардык блоктордун жүрүм-турумун өзгөртөлү, padding жана чектер биздин блокторду кеңейтпесин:

* {
	box-sizing: border-box;
}

Эми бизге content жана sidebar'ди бир катарга койуш керек. Муну флекс менен жасайбыз:

#container {
	display: flex;
}

Content жана sidebar'ге туураларын көрсөтөлү. Бул учурда алардын туураларынын суммасы wrapper'дин туурасына барабар болушу керек:

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

Келгиле, sidebar менен contentтин ортосунда аралык калтыралы. Бул учурда sidebar'ге margin тагуу керек. Бул үчүн бизден бирөөнүн туурасынан убактылуу алып салуу керек болот. Ал аралык үчүн content'тен алалы, тиешелүү түрдө анын туурасын азайталы:

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

Эми биз бийиктикти кошобуз, анткени биздин элементтерде мазмун жок. Жетиштүү болуп, бир элементке гана бийиктикти кошобуз, анткени экинчи флекс элементи бийиктик боюнча ылайыкташат (эмне үчүн?). Келгиле, content'ке бийиктикти белгилейли:

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

Келгиле, content жана sidebar'ге калган стилдерди кошолу:

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

Болду, биздин макет даяр. Келгиле, бардык кодду бирге чогултуп алалы:

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