Mpango wa Muundo wa Safu Mbili wa Tovuti katika CSS

Wacha tufanye muundo wa safu mbili wa aina ifuatayo:

Kuanza, tuunde muundo mkuu wa ukurasa:

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

Sasa tuweke mitindo kwa wrapper, tukiiweka katikati ya skrini:

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

Sasa tuweke mitindo ya kichwa na kaki:

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

Kama unavyoona, tunaweka kichwa na kaki urefu. Tunafanya hivyo kwa sababu katika mpango wetu hawana yaliyomo. Ikiwa kuna yaliyomo haitakiwi kuweka urefu kwa vitalu - urefu utaundwa na yaliyomo yake.

Pia makini na kwamba hatu wawekei upana. Jambo ni kwamba kichwa na kaki ni vipengele vya kizuizi na upana wao utakuwa sawa kiotomatiki na upana wa wrapper.

Sasa tuwawekee padding, ili maandishi yasiungane na mipaka:

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

Hata hivyo, uwepo wa padding utaathiri vibaya ukubwa wa vitalu - vitakuwa kubwa kuliko vilivyoonyeshwa. Wacha tubadilishwe tabia ya vitalu vyote ili padding na mipaka isipanue vitu vyetu:

* {
	box-sizing: border-box;
}

Sasa tunahitaji kuweka yaliyomo na sidebar kwenye mstari mmoja. Wacha tufanye hivi kwa kutumia fleksa:

#container {
	display: flex;
}

Tuweke yaliyomo na sidebar upana wao. Wakati huo jumla ya upana wao inapaswa kuwa sawa na upana wa wrapper:

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

Wacha tuseme tunataka kutengeneza nafasi kati ya sidebar na yaliyomo. Katika kesi hii sidebar inahitaji kuwekewa margin. Wakati huo huo itatubidi kukata upana kutoka kwa mtu mmoja kwa margin huu. Tukate kutoka kwa yaliyomo, kwa kupunguza upana wake ipasavyo:

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

Sasa tuongeze urefu, kwani vipengele vyetu havina yaliyomo. Inatosha kuongeza urefu kwa kipengele kimoja tu, kwani kipengele cha pili cha fleks kitarekebisha urefu (kwa nini?). Wacha tuweke urefu kwa yaliyomo:

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

Wacha tuongeze yaliyomo na sidebar mitindo mingine iliyobaki:

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

Yote, muundo wetu umekwisha. Wacha tukusanye msimbo wote pamoja:

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