Schéma de mise en page à deux colonnes de site en CSS

Créons une mise en page à deux colonnes du type suivant :

Pour commencer, créons la structure principale de la page :

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

Maintenant, appliquons des styles au wrapper, en le centrant sur l'écran :

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

Définissons maintenant les styles de l'en-tête et du pied de page :

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

Comme vous le voyez, nous définissons une hauteur pour l'en-tête et le pied de page. Nous faisons cela car dans notre schéma, ils n'ont pas de contenu. En présence de contenu, il ne faut pas définir de hauteur pour les blocs - elle sera définie par leur contenu.

Notez également que nous ne leur définissons pas de largeur. En effet, l'en-tête et le pied de page sont des éléments de bloc et leur largeur sera automatiquement égale à la largeur du wrapper.

Ajoutons-leur un padding pour que le texte ne colle pas aux bordures :

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

Cependant, la présence de padding affectera négativement les dimensions des blocs - ils deviendront plus grands que prévu. Modifions le comportement de tous les blocs pour que le padding et les bordures n'élargissent pas nos blocs :

* {
	box-sizing: border-box;
}

Maintenant, nous devons placer le contenu et la barre latérale sur une même ligne. Faisons cela à l'aide des flexbox :

#container {
	display: flex;
}

Indiquons la largeur du contenu et de la barre latérale. La somme de leurs largeurs doit être égale à la largeur du wrapper :

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

Supposons que nous voulions créer un espace entre la barre latérale et le contenu. Dans ce cas, il faut appliquer une margin à la barre latérale. En même temps, nous devrons récupérer la largeur pour cette margin sur l'un des éléments. Prenons-la sur le contenu, en réduisant ainsi sa largeur :

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

Ajoutons maintenant une hauteur, car nos éléments ne contiennent pas de contenu. Il suffit d'ajouter une hauteur à un seul élément, car le deuxième élément flex s'adaptera en hauteur (pourquoi ?). Ajoutons une hauteur au contenu :

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

Ajoutons les styles restants au contenu et à la barre latérale :

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

Voilà, notre mise en page est prête. Rassemblons tout le code :

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