Mise en page CSS - largeur et largeur maximale
Utilisation de la largeur, de la largeur maximale et de la marge : auto ;
Comme mentionné dans le chapitre précédent; un élément de niveau bloc occupe toujours toute la largeur disponible (il s'étend aussi loin que possible vers la gauche et la droite).
La définition de la widthd'un élément de niveau bloc l'empêchera de s'étendre jusqu'aux bords de son conteneur. Ensuite, vous pouvez définir les marges sur auto, pour centrer horizontalement l'élément dans son conteneur. L'élément occupera la largeur spécifiée et l'espace restant sera réparti également entre les deux marges :
Remarque : Le problème avec ce qui <div>précède se produit lorsque la fenêtre du navigateur est plus petite que la largeur de l'élément. Le navigateur ajoute alors une barre de défilement horizontale à la page.
L'utiliser max-widthà la place, dans cette situation, améliorera la gestion des petites fenêtres par le navigateur. Ceci est important pour rendre un site utilisable sur de petits appareils :
Conseil : redimensionnez la fenêtre du navigateur à moins de 500 pixels de large pour voir la différence entre les deux divs !
Voici un exemple des deux div ci-dessus :
Exemple
div.ex1 {
width: 500px;
margin:
auto;
border: 3px solid #73AD21;
}
div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
}