Kétszálas weboldal elrendezési séma CSS-ben

Készítsünk el egy kétszálas elrendezést a következő módon:

Először hozzuk létre az oldal alap szerkezetét:

<div id="wrapper">
	<div id="header">
		fejléc
	</div>
	<div id="container">
		<div id="content">
			tartalom
		</div>
		<div id="sidebar">
			oldalsáv
		</div>
	</div>
	<div id="footer">
		lábléc
	</div>
</div>

Most adjunk stílusokat a wrapper-nek, középre igazítva a képernyőn:

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

Most adjunk stílusokat a fejlécnek és a láblécnek:

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

Amint látod, megadjuk a fejléc és lábléc magasságát. Ezt azért tesszük, mert a sémánkban nincs tartalmuk. Ha lenne tartalom, nem szabadna megadni a blokkok magasságát - a tartalmuk határozná meg.

Figyeld meg azt is, hogy nem adjuk meg a szélességüket. Ez azért van, mert a fejléc és a lábléc blokk elemek, és szélességük automatikusan megegyezik a wrapper szélességével.

Most adjunk nekik padding-et, hogy a szöveg ne érjen hozzá a szélekhez:

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

A padding jelenléte azonban rosszul hat a blokkok méreteire - nagyobbak lesznek, mint amennyi. Változtassuk meg az összes blokk viselkedését úgy, hogy a padding és a szegélyek ne növeljék a blokkjainkat:

* {
	box-sizing: border-box;
}

Most egymás mellé kell helyeznünk a tartalmat és az oldalsávot. Tegyük ezt flexbox használatával:

#container {
	display: flex;
}

Adjunk meg a tartalomnak és az oldalsávnak a szélességét. Eközben szélességük összege egyenlő kell legyen a wrapper szélességével:

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

Tegyük fel, hogy térközt akarunk létrehozni az oldalsáv és a tartalom között. Ebben az esetben az oldalsávnak margin-et kell beállítani. Ehhez le kell vennünk valakinek a szélességéből a margin miatt. Vegyük le a tartalomról, ennek megfelelően csökkentve a szélességét:

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

Most adjunk magasságot, mivel az elemeink nem tartalmaznak tartalmat. Elég csak egy elemnek megadni a magasságot, mert a másik flex elem magasságban igazodik (miért?). Adjunk meg magasságot a tartalomnak:

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

Adjunk hozzá a tartalomhoz és az oldalsávhoz a többi stílust:

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

Kész, az elrendezésünk kész. Gyűjtsük össze az összes kódot:

<div id="wrapper">
	<div id="header">
		fejléc
	</div>
	<div id="container">
		<div id="sidebar">
			oldalsáv
		</div>
		<div id="content">
			tartalom
		</div>
	</div>
	<div id="footer">
		lábléc
	</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;
}