Plusieurs boites de front ! Comment ?

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

Attention par défaut une boite a la largeur de sa boite parente (notion d'héritage).
Or 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 ajouter à la largeur exprimée par 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 CSS est le suivant :

<header> <h2>En-tête de page </h2> </header> <section> <nav> <img src ="../images/bikini.jpg" class ="droite" /> <h2>Menu </h2> </nav> <article> <img src ="../images/trikini.jpg" class ="gauche"/> <h2>Contenu</h2> </article> </section> <footer><h2>Pied de page</h2></footer>

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.

Première solution : float

La feuille de style (extraits):

* {margin :0 ; padding : 0; font-size : 14pt;} body {width : 900px; margin : 10px auto 10px auto ; } header{height : 100px ;} header,nav,article,footer {background : pink ; margin-top : 10px;} nav{float : left ; width : 29% ; height : 300px ; } article {float : right ; width : 69% ; height : 400px ; } footer {width : 100% ; height : 100px ; float : left ;}

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 plusieurs grandes divisions de la page.

Les deux boites "enfants" de SECTION doivent être de front.
Il faut donc que la somme de leur largeur ne dépasse pas celle de SECTION.
La boite NAV doit "flotter" à gauche et la boite ARTICLE doit "flotter" à droite.
De plus méfiez vous, si pour ces boites vous avez défini des marges gauche et droite la largeur totale est supérieure à celle indiquée par la propriété width d'où l'importance de supprimer toutes les marges (internes et externes) par défaut avec l'instruction * {margin :0 ; padding :0;}
Aperçu de la mise en page

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 si 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 (extrait) :

* {margin :0 ; padding : 0; font-size : 14pt;} body {width : 900px ; margin : 10px auto 10px auto ; } header, nav, article, aside, footer {background : pink ; } header, footer {height : 100px; } nav, article {display : inline-block; vertical-align : top;} nav{width : 29% ; height : 300px ; margin-top : 10px; } article {width : 69% ; height : 400px ; margin-top : 10px; margin-left: 1% ;}

Les boites HEADER, NAV, ARTICLE,FOOTER sont désormais des éléments "inline-block".
Il faut toujours éviter que les boites ne se collent d'où certaines marges externes.
Attention la largeur totale de ARTICLE est 70% : 69% + 1% de marge gauche.
Aperçu de la mise en page

Quelle solution retenir

Si vous voulez mettre de front deux boites la solution "float" convient parfaitement.
Mais si vous désirez placer côte à côte plus de 2 boites alors l'emploi de la propriété float est possible mais ça devient "un gros bricolage" car il faut jouer aussi sur les marges externes des boites ...
Je vous conseille alors fortement d'utiliser la deuxième technique : display : inline-block !

On aurait pu aussi utiliser position : absolute mais cette technique de positionnement est plus délicate car il faut ensuite calcule les top & left des différentes boites ...
Retour menu