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 {
	width: 1000px;
	margin: 30px auto;
	border: 1px solid black;
}

Энди хедер ва футерга стилларни белгилаймиз:

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

Кўриб турганингиздек, биз хедер ва футерга баландлик белгилаймиз. Бунга сабаб, бизнинг схемамизда уларнинг мундарижаси йўқ. Мундарижа мавжуд бўлганда блокларга баландлик белгилаш мақсадга мувофик эмас - уларнинг баландлиги мундарижасига кўра шаклланади.

Шунингдек, эътиборингизни қаратингки, биз уларга энлик белгиламадик. Бунинг сабаби, хедер ва футер блокли элементлар бўлиб, уларнинг энли враппернинг энлига автоматик мос келади.

Энди уларга 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;
}

Энди биз контент ва сайдбарни бир қаторга қўйишимиз керак. Буни флекслар ёрдамида бажарамиз:

#container {
	display: flex;
}

Контент ва сайдбарга уларнинг энларини кўрсатамиз. Бу ҳолда уларнинг энларининг йиғиндиси враппернинг энлига тенг бўлиши керак:

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

Фарз қилайлик, биз сайдбар ва контент ўртасида бўшлиқ қолдирмоқчимиз. Бу ҳолда сайдбарга margin белгилаш керак. Бунинг учун биз бу margin учун кимдирдан энлик "олиб ташлашимиз" керак. Контентдан оламиз, мос равишда унинг энлини камайтирамиз:

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

Энди бизда мундарижа йўқлиги сабабли баландлик қўшаймиз. Битта элементга баландлик қўшиш кифоя, чунки иккинчи флекс элемента баландликка мослашади (нега?). Контентга баландлик белгилаймиз:

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

Энди контент ва сайдбарга қолган стилларни қўшамиз:

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