Skema e Layout-it me Dy Kolona në CSS

Le të krijojmë një layout me dy kolona të formës në vijim:

Për fillim le të krijojmë strukturën bazë të faqes:

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

Tani le t'ia caktojmë stil wrapper-it, duke e përafruar në qendër të ekranit:

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

Le të caktojmë tani stilet për header dhe footer:

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

Siç e shihni, ne i caktojmë header dhe footer lartësinë. Këtë e bëjmë sepse në skemën tonë ato nuk kanë përmbajtje. Nëse ka përmbajtje nuk duhet t'u caktohet lartësi blloqeve - ajo do të formohet nga përmbajtja e tyre.

Vini re gjithashtu se ne nuk u caktojmë atyre gjerësi. Çështja është se header dhe footer janë elemente bllok dhe gjerësia e tyre do të jetë automatikisht e barabartë me gjerësinë e wrapper-it.

Le t'u caktojmë atyre padding, në mënyrë që teksti të mos ngjitet në kufijtë:

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

Megjithatë, prania e padding do të ndikojë keq në përmasat e blloqeve - ato do të bëhen më të mëdha, sesa janë specifikuar. Le të ndryshojmë sjelljen e të gjitha blloqeve në mënyrë që padding dhe kufijtë të mos zgjerojnë blloqet tona:

* {
	box-sizing: border-box;
}

Tani ne duhet të vendosim përmbajtjen dhe sidebar në një rresht. Le ta bëjmë këtë duke përdorur flekset:

#container {
	display: flex;
}

Le të përcaktojmë gjerësinë e përmbajtjes dhe sidebar. Në këtë rast shuma e gjerësive të tyre duhet të jetë e barabartë me gjerësinë e wrapper-it:

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

Le të themi se duam të bëjmë një hapësirë midis sidebar dhe përmbajtjes. Në këtë rast sidebar duhet të ketë margin. Në këtë rast ne do të duhet të heqim gjerësinë për këtë margin nga dikush. Le ta heqim nga përmbajtja, duke ulur në përputhje me rrethanat gjerësinë e saj:

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

Tani le të shtojmë lartësinë, pasi elementët tanë nuk përmbajnë përmbajtje. Mjafton të shtohet lartësia vetëm një elementi, sepse elementi i dytë fleks do të përshtatet në lartësi (pse?). Le t'ia caktojmë lartësinë përmbajtjes:

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

Le t'u shtojmë përmbajtjes dhe sidebar stilat e mbetura:

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

Kjo është e gjitha, layout-i ynë është gati. Le të mbledhim të gjithë kodin së bashku:

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