Schemat układu dwukolumnowego strony w CSS

Stwórzmy układ dwukolumnowy następującego rodzaju:

Na początek stwórzmy główną strukturę strony:

<div id="wrapper">
	<div id="header">
		nagłówek
	</div>
	<div id="container">
		<div id="content">
			treść
		</div>
		<div id="sidebar">
			panel boczny
		</div>
	</div>
	<div id="footer">
		stopka
	</div>
</div>

Teraz przypiszmy style dla kontenera, wyrównując go do środka ekranu:

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

Ustawmy teraz style dla nagłówka i stopki:

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

Jak widzisz, ustawiamy nagłówkowi i stopce wysokość. Robimy tak, ponieważ w naszym schemacie nie mają one zawartości. W przypadku posiadania zawartości nie należy ustawiać wysokości blokom - będzie się ona kształtować na podstawie ich zawartości.

Zwróć także uwagę na to, że nie ustawiamy im szerokości. Chodzi o to, że nagłówek i stopka to elementy blokowe i ich szerokość będzie automatycznie równa szerokości kontenera.

Ustawmy im teraz padding, aby tekst nie przylegał do krawędzi:

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

Obecność paddingu, jednak, źle wpłynie na rozmiary bloków - staną się one większe, niż określono. Zmieńmy zachowanie wszystkich bloków tak, aby padding i obramowania nie powiększały naszych bloków:

* {
	box-sizing: border-box;
}

Teraz musimy umieścić treść i panel boczny w jednym rzędzie. Zróbmy to za pomocą flexboxów:

#container {
	display: flex;
}

Określmy treści i panelowi bocznemu ich szerokość. Przy tym suma ich szerokości powinna być równa szerokości kontenera:

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

Załóżmy, że chcemy zrobić odstęp między panelem bocznym a treścią. W tym przypadku panelowi bocznemu trzeba ustawić margin. Przy tym będziemy musieli od kogoś odjąć szerokość dla tego marginu. Odejmijmy od treści, odpowiednio zmniejszając jej szerokość:

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

Dodajmy teraz wysokość, ponieważ nasze elementy nie zawierają zawartości. Wystarczy dodać wysokość tylko jednemu elementowi, ponieważ drugi element flex dostosuje się wysokością (dlaczego?). Ustawmy wysokość treści:

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

Dodajmy treści i panelowi bocznemu pozostałe style:

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

Wszystko, nasz układ jest gotowy. Zbierzmy cały kod razem:

<div id="wrapper">
	<div id="header">
		nagłówek
	</div>
	<div id="container">
		<div id="sidebar">
			panel boczny
		</div>
		<div id="content">
			treść
		</div>
	</div>
	<div id="footer">
		stopka
	</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;
}