Schema di layout a due colonne per siti web in CSS

Creiamo un layout a due colonne del seguente tipo:

Per iniziare, creiamo la struttura principale della pagina:

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

Ora applichiamo gli stili al wrapper, allineandolo al centro dello schermo:

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

Definiamo ora gli stili per l'header e il footer:

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

Come puoi vedere, impostiamo l'altezza per l'header e il footer perché nel nostro schema non hanno contenuto. Se ci fosse contenuto, non bisognerebbe impostare l'altezza dei blocchi - si formerebbe automaticamente in base al loro contenuto.

Nota anche che non impostiamo la loro larghezza. Il fatto è che header e footer sono elementi di blocco e la loro larghezza sarà automaticamente uguale a quella del wrapper.

Ora aggiungiamo del padding, in modo che il testo non aderisca ai bordi:

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

Tuttavia, la presenza del padding influenzerà negativamente le dimensioni dei blocchi - diventeranno più grandi di quanto specificato. Cambiamo il comportamento di tutti i blocchi in modo che padding e bordi non espandano i nostri blocchi:

* {
	box-sizing: border-box;
}

Ora dobbiamo mettere il contenuto e la sidebar su una sola riga. Facciamolo usando i flexbox:

#container {
	display: flex;
}

Specifichiamo la larghezza per il contenuto e la sidebar. La somma delle loro larghezze deve essere uguale alla larghezza del wrapper:

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

Supponiamo di voler creare una spaziatura tra la sidebar e il contenuto. In questo caso, è necessario applicare un margin alla sidebar. Dovremo quindi sottrarre la larghezza per questo margin da qualcuno. Prendiamola dal contenuto, riducendo di conseguenza la sua larghezza:

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

Ora aggiungiamo l'altezza, poiché i nostri elementi non contengono contenuto. È sufficiente aggiungere l'altezza solo a un elemento, poiché il secondo elemento flex si adatterà in altezza (perché?). Assegniamo l'altezza al contenuto:

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

Aggiungiamo gli stili rimanenti al contenuto e alla sidebar:

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

Fatto, il nostro layout è pronto. Mettiamo insieme tutto il codice:

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