Kaksisarakkeisen verkkosivun asettelun kaavio CSS:ssä

Tehdään kaksisarakkeinen asettelu seuraavanlaisena:

Aluksi luodaan sivun perusrakenne:

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

Asetetaan nyt tyylit wrapperille, kohdistaen sen näytön keskelle:

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

Asetetaan nyt headerin ja footerin tyylit:

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

Kuten näet, annamme headerille ja footerille korkeuden. Teemme tämän, koska kaaviossamme niillä ei ole sisältöä. Jos sisältöä on, lohkojen korkeutta ei kannata asettaa - se muodostuu niiden sisällöstä.

Huomaa myös, että emme aseta niille leveyttä. Asia on siinä, että header ja footer ovat lohkoelementtejä, ja niiden leveys on automaattisesti sama kuin wrapperin leveys.

Annetaan nyt niille padding, jotta teksti ei tartu rajoihin:

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

paddingin olemassaolo kuitenkin vaikuttaa huonosti lohkojen kokoihin - niistä tulee suurempia kuin on määritelty. Muutetaan kaikkien lohkojen käyttäytymistä niin, että padding ja reunat eivät laajenna lohkojamme:

* {
	box-sizing: border-box;
}

Nyt meidän on asetettava sisältö ja sivupalkki yhteen riviin. Tehdään tämä flexboxien avulla:

#container {
	display: flex;
}

Määritetään sisällölle ja sivupalkille niiden leveys. Samalla niiden leveysten summan on oltava yhtä suuri kuin wrapperin leveys:

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

Oletetaan, että haluamme tehdä välin sivupalkin ja sisällön väliin. Tässä tapauksessa sivupalkille on annettava margin. Samalla meidän on otettava leveys joltain tätä marginä varten. Otetaan se sisällöltä, pienentäen vastaavasti sen leveyttä:

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

Lisätään nyt korkeus, koska elementeissämme ei ole sisältöä. Riittää, että lisäämme korkeuden vain yhdelle elementille, sillä toinen flex-elementti sopeutuu korkeuden mukaan (miksi?). Annetaan korkeus sisällölle:

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

Lisätään sisällölle ja sivupalkille loput tyylit:

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

Valmista, asettelumme on valmis. Kootaan kaikki koodi yhteen:

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