HTML & CSS : comment disposer de front plusieurs boites ?

Faut-il rappeler que par défaut les boites d'une page se positionnent les unes en dessous des autres. C'est le mode de positionnement normal ou flux normal des éléments de type "block".
Donc dès que vous voulez mettre plusieurs éléments "block" côte à côte vous devez utiliser une technique de positionnement !

Paradoxalement la propriété CSS position avec ses différentes valeurs : absolute, fixed, relative est rarement utilisée pour placer de front plusieurs boites ...

Si vous voulez que plusieurs boites se positionnent côte à côte dans leur conteneur parent il faut que la somme de leur largeur ne dépasse pas celle du parent.
Attention la largeur totale d'une boite peut être supérieure à celle indiquée par la propriété width ; il faut en effet ajouter à la largeur exprimée par la propriété width les marges gauche et droite externe et interne ainsi que les bordures gauche et droite.

Exemple

Le code HTML commun aux différentes solutions

BODY contient trois grandes divisions : HEADER, SECTION, FOOTER.
La boite SECTION contient à son tour deux boites : NAV & ARTICLE.
Les boites NAV et ARTICLE sont donc "enfants" de SECTION et doivent être de front.

Le code CSS commun aux différentes solutions

	* {margin :0px; padding : 0px; }
	h2 {font-size : 14pt ; text-align : center; line-height : 20px ; margin : auto ;  }
	img.gauche {height : 100px ; float : left ; margin : 1%}
	img.droite {height : 100px ; float : right ; margin: 1%; }
	p {font-size : 16px; padding : 5px;}
	article {overflow : auto; }

La première règle s'appelle un "reset" car elle annule les marges par défaut associées par défaut à certaines balises de type block.
Les images "flottent" à gauche ou à droite dans leur boite parente sans coller (marge) selon la classe appliquée ("droite" ou "gauche").
Il y aussi gestion de l'éventuel déborbement du contenu dans ARTICLE ; règle indispensable pour les petits écrans.

Première solution : float

Autres règles (en plus des 6 règles déjà citées)

	body {width : 90% ; margin : auto ;}
	header, footer{height : 100px ; width : 100%;}
	header,nav,article,footer {background : lavender ; margin-top : 10px;}
	nav{float : left ; width : 29% ; height : 400px ; }
	article {float : right ; width : 69% ; height : 400px ; margin-left : 1% }
	footer {float : left ; height : 100px ;  }

Notez que dans le cadre d'un "responsive" basique la largeur de BODY est exprimée en pourcentage : 90% de la fenêtre.
La propriété float est en principe destinée à positionner (à gauche ou à droite) un élément "inline" dans son conteneur. Mais dans la pratique elle est très utilisée pour positionner de front des grandes divisions de la page.
Maintenant avec les nouveaux outils proposés par CSS3 cette utilisation devrait devenir obsolète.

Les deux boites "enfants" de SECTION doivent être de front.
La boite NAV doit "flotter" à gauche dans SECTION et la boite ARTICLE doit "flotter" à droite.
Il faut donc que la somme de leur largeur ne dépasse pas celle de SECTION sinon ARTICLE va se positionner à droite mais sous NAV.
La largeur de SECTION n'étant pas précisée, elle est égale à celle de son conteneur (BODY).
Largeur totale de ARTICLE = 69% + 1% (marge externe gauche) ; largeur totale de NAV = 29% (pas de marges) donc il y aura même un "gouttière" de 1% entre les deux boites ! Le rendu !

Observez la "gouttière" entre NAV & ARTICLE.

Deuxième solution : display inline-block

Une autre technique consiste à transformer les éléments NAV et ARTICLE en "inline-block" c'est à dire des boites qui par défaut se positionnent côte à côte et tant qu'il y a de la place bien sûr !

Attention si les éléments "inline-block" n'ont pas la même hauteur ils s'alignent verticalement par rapport à la base. Il faut donc forcer l'alignement vertical par le haut avec vertical-align : top.

La feuille de style (en plus des six règles déjà citées)

Les boites HEADER, NAV, ARTICLE, FOOTER sont désormais des éléments "inline-block".
Le rendu !

Notez le petit "bug" : la boite ARTICLE est un peu en retrait à droite par rapport à HEADER et FOOTER
Et si la marge gauche passe à 2% alors la boite ARTICLE passe alors à la ligne.
L'un de ses inconvénients majeurs de la méthode display inline-block est l'apparition d'un espace indésirable et incompressible entre les blocs.

Troisième solution : display flex

Enfin la version 3 de CSS apporte une solution simple de mise en page : l'outil flexbox.
Dans notre exemple il suffit de transformer la balise SECTION (qui a pour enfants NAV et ARTICLE) en "flex_container" : section {display : flex; }
Grâce à cette simple règle les boites "enfants" de SECTION vont se positionner côte à côte !

La feuille de style (en plus des règles déjà cités)

	body {width : 90% ; margin : auto ;}
	header, footer{height : 100px ; width :100%;}
	header,nav,article,footer {background : lavender ; margin-top : 10px;}
	section {display : flex; flex-direction : row;}
	nav, article {height : 400px;}
	article {width : 69%; margin-left : 1%; }
	nav {width : 29%; margin-right : 1%;}

SECTION est désormais un "flex-container" avec par défaut une disposition selon un axe horizontale.
Le rendu !

Réduisez la largeur de la fenêtre, le rendu est toujours satisfaisant.

Quatrième solution : display grid

La spécification CSS3 propose aussi le "positionnement en grille" (display grid). Pour découvrir l'outil grid-layout

Avec la nouvelle propriété box-sizing de CSS3 vous pouvez faire en sorte que la largeur totale d'une boite corresponde effectivement à celle précisée par la propriété width La propriété box-sizing
Retour menu