Schema de layout cu două coloane pentru site în CSS

Să creăm un layout cu două coloane de următoarea formă:

Pentru început, să creăm structura de bază a paginii:

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

Acum să setăm stilurile pentru wrapper, aliniindu-l pe centrul ecranului:

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

Să setăm acum stilurile pentru header și footer:

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

După cum vedeți, setăm înălțime pentru header și footer. Facem acest lucru deoarece în schema noastră acestea nu au conținut. Dacă ar exista conținut, nu ar trebui să setăm înălțimea blocurilor - aceasta va fi determinată de conținutul lor.

De asemenea, observați că nu le setăm lățimea. Motivul este că header-ul și footer-ul sunt elemente de tip block și lățimea lor va fi automat egală cu lățimea wrapper-ului.

Să le setăm padding, astfel încât textul să nu se lipească de margini:

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

Cu toate acestea, prezența padding-ului va afecta dimensiunile blocurilor - acestea vor deveni mai mari decât cele specificate. Să modificăm comportamentul tuturor blocurilor astfel încât padding-ul și marginile să nu extindă blocurile noastre:

* {
	box-sizing: border-box;
}

Acum trebuie să așezăm conținutul și bara laterală pe același rând. Să facem acest lucru cu ajutorul flexbox-ului:

#container {
	display: flex;
}

Să specificăm lățimea pentru conținut și bara laterală. În acest caz, suma lățimilor lor trebuie să fie egală cu lățimea wrapper-ului:

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

Să presupunem că vrem să creăm un spațiu între bara laterală și conținut. În acest caz, trebuie să setăm margin pentru bara laterală. În acest caz, va trebui să "mușcăm" lățime de la cineva pentru acest margin. Să "mușcăm" de la conținut, reducând în consecință lățimea acestuia:

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

Acum să adăugăm înălțime, deoarece elementele noastre nu conțin conținut. Este suficient să adăugăm înălțime doar unui element, deoarece al doilea element flex se va adapta la înălțime (de ce?). Să setăm înălțimea pentru conținut:

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

Să adăugăm conținutului și barei laterale restul stilurilor:

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

Gata, layout-ul nostru este finalizat. Să adunăm tot codul împreună:

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