Схемаи макети ду сутунӣ дар CSS

Биёед макети ду сутунии зеринро созем:

Барои оғоз сохтори асосии саҳифаро месозем:

<div id="wrapper">
	<div id="header">
		sарлавҳа
	</div>
	<div id="container">
		<div id="content">
			мӯҳтаво
		</div>
		<div id="sidebar">
			панели канорӣ
		</div>
	</div>
	<div id="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-ро дар як қатор ҷойгир кунем. Инро бо истифода аз flex-ҳо анҷом медиҳем:

#container {
	display: flex;
}

Ба content ва sidebar паҳноияшонро муайян кунем. Дар ин ҳолат, ҷамъи паҳноии онҳо бояд ба паҳноии wrapper баробар бошад:

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

Фарз кунем, ки мо мехоҳем байни sidebar ва content фосила созем. Дар ин сурат ба sidebar лозим аст margin гузорем. Дар ин ҳолат мо бояд барои ин margin аз касе паҳноӣ кам кунем. Аз content кам мекунем, мувофиқан паҳноии онро коҳш медиҳем:

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

Биёед акнун баландиро илова кунем, зеро унсурҳои мо мӯҳтаво надоранд. Баландиро танҳо ба як унсур илова кардан кофист, зеро унсури дуюми flex ба баландӣ мутобиқ мешавад (чаро?). Биёед ба 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">
		sарлавҳа
	</div>
	<div id="container">
		<div id="sidebar">
			панели канорӣ
		</div>
		<div id="content">
			мӯҳтаво
		</div>
	</div>
	<div id="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;
}