Dviejų stulpelių svetainės maketo schema CSS

Sukurkime dviejų stulpelių maketą tokį pavidalo:

Pirmiausia sukurkime pagrindinį puslapio struktūrą:

<div id="wrapper">
	<div id="header">
		antraštė
	</div>
	<div id="container">
		<div id="content">
			turinys
		</div>
		<div id="sidebar">
			šoninė juosta
		</div>
	</div>
	<div id="footer">
		poraštė
	</div>
</div>

Dabar priskirkime stilius "wrapper" elementui, sulygiuodami jį ekrano centre:

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

Dabar nustatykime antraštės ir poraštės stilius:

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

Kaip matote, mes nustatome antraštės ir poraštės aukštį. Tai darome, nes mūsų schemoje jos neturi turinio. Jei turinys būtų, aukščio blokams nustatyti nevertėtų - jis formuotųsi pagal jų turinį.

Taip pat atkreipkite dėmesį, kad mes nenustatome jų pločio. Esmė ta, kad antraštė ir poraštė yra blokiniai elementai ir jų plotis bus automatiškai lygus "wrapper" pločiui.

Dabar suteikime jiems padding, kad tekstas neliptų prie kraštų:

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

Tačiau padding buvimas neigiamai paveiks blokų dydžius - jie taps didesni, nei nurodyta. Pakeiskime visų blokų elgesį taip, kad padding ir kraštinės neišplėstų mūsų blokų:

* {
	box-sizing: border-box;
}

Dabar mums reikia pastatyti turinį ir šoninę juostą vienoje eilėje. Padarykime tai naudodami "flex":

#container {
	display: flex;
}

Nurodykime turiniui ir šoninei juostai jų plotį. Tuo pačiu jų plotų suma turi būti lygi "wrapper" pločiui:

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

Tarkime, mes norime padaryti tarpą tarp šoninės juostos ir turinio. Tokiu atveju šoninei juostai reikia nustatyti margin. Tuo pačiu mes turėsime atimti plotį šiam margin iš kažko. Atimsime iš turinio, atitinkamai sumažindami jo plotį:

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

Dabar pridėkime aukštį, nes mūsų elementai neturi turinio. Pakanka pridėti aukštį tik vienam elementui, nes antrasis "flex" elementas prisitaikys pagal aukštį (kodėl?). Suteikime aukštį turiniui:

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

Pridėkime turiniui ir šoninei juostai likusius stilius:

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

Viskas, mūsų maketas paruoštas. Surinkime visą kodą kartu:

<div id="wrapper">
	<div id="header">
		antraštė
	</div>
	<div id="container">
		<div id="sidebar">
			šoninė juosta
		</div>
		<div id="content">
			turinys
		</div>
	</div>
	<div id="footer">
		poraštė
	</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;
}