Je vous propose aujourd'hui de parler d'un élément que l'on retrouve très souvent dans nos pages web, le conteneur. Cet élément permet d'englober plusieurs sous éléments afin de les centrer dans la page (cela permet d’éviter que le contenu s’étende sur toute la largeur de l’écran, ce qui peut nuire à la lisibilité dans le cadre de grands écrans).
On peut alors se demander quelle solution choisir pour créer ce type d'élément ?
Marges automatiques
La première stratégie consiste à donner à notre élément une largeur fixe et d'utiliser ensuite les marges automatique afin de centre et notre contenu.
.container {
width: 1000px;
margin-left: auto;
margin-right: auto;
}Il est possible de remplacer notre largeur par un max-width qui va permettre de gérer convenablement le cas d’écrans plus petits.
.container {
width: calc(100% - 40px);
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}On peut améliorer la flexibilité de notre script en ajoutant des variables CSS.
:root {
--container-padding: 20px;
--container-width: calc(100% - var(--container-padding) * 2);
--container-max-width: 1000px;
}
.container {
width: var(--container-width);
max-width: var(--container-max-width);
margin-left: auto;
margin-right: auto;
}Les variables permettent de gagner en flexibilité et on peut par exemple changer la valeur du container en fonction des résolutions.
Padding & calc
Le principal problème avec l'approche précédente est que l'utilisation de marge va nous empêcher d'appliquer une couleur de fond à notre élément et on devra alors dans notre HTML utiliser plusieurs éléments.
<div class="background">
<div class="container">
<!-- Notre contenu -->
</div>
</div>Il est cependant possible de remédier à ce problème en utilisant une autre technique d'alignement basée sur les marges intérieurs plutôt que les marges extérieur :
:root {
--container-padding: 20px;
--container-width: calc(100% - var(--container-padding) * 2);
}
.container {
box-sizing: border-box;
width: 100%;
padding-left: calc(50% - var(--container-width) / 2);
padding-right: calc(50% - var(--container-width) / 2);
}
@media only screen and (min-width: 1040px) {
:root {
--container-width: 1000px;
}
}Malheureusement, il n'est pas possible de dynamiser cette media-query à l'aide de variables CSS, car elles ne sont pas supportées à ce niveau-là. On perd du coup un peu de flexibilité par rapport à la méthode précédente car il faudra faire la calcul manuellement pour définir les différents media-queries. En revanche cela permet de simplifier le code HTML et de limiter les divs inutiles :
<div class="background container">
<!-- Notre contenu -->
</div>
