À l'aide de la propriété CSS float que nous avons vu à plusieurs reprise au cours de la partie précédente, nous pouvons positionner nos divers éléments sur la page web.
Par exemple si je veux que mon menu soit à gauche et que mon corps d'article soit à droite, je fais comment ?
Simple : il suffit d'utiliser cette propriété float.
nav { float: left; width: 140px; }
En appliquant cette propriété au menu de navigation ce dernier va flotter à gauche.
Maintenant vous remarquerez qu'il y a deux problèmes qui se trouvent face à nous. Premièrement le texte est tout collé au menu de navigation, et deuxièmement le texte reprend en dessous du menu de navigation au lieu d'à côté.
Pour que la section soit alignée et ainsi faire d'une pierre deux coups en réparant les deux erreurs à la fois, il suffit d'ajouter une marge extérieure au côté gauche de la section.
Voici le code :
section { margin-left: 160px; }
J'ai mis 160 pixels car je laisse toujours un espace, ici 20 pixels, entre les deux éléments.
Maintenant vos éléments sont correctement alignés.