Sommaire de la page
Par défaut le div n'a pas de marge ni de padding ni de hauteur et ni de largeur, contrairement au table de plus,son apparence et son comportement peuvent se modifier facilement à l'aide du style CSS. Donc, il est trés intéressant de l'utiliser pour la mise en page de notre site.
NB: la dimension des boîtes n'est pas interprétée de la même façon pas tous les navigateurs. voir cette rubrique
- contenu: le texte d'un paragraphe par exemple
- padding: l'espace entourant le paragraphe
- border: encadrement du paragraphe
- margin: espace entourant le tout
Centrer les div n'est pas vraiment simple car IE (Internet Explorer) ne les voient pas comme les autres navigateurs ce sont les marges et le padding qui causent le problème, en voici des exemples.
voir cette rubrique
Div 1 vue par FirerFox: largeur total en gris 360px largeur boîte: width:50px; margin-left:10px; padding:5px;
((10 + 50) + (2*5)) *5 = 350
Il reste 10 pour la marge de droite pour faire le total de 360px qui est la largeur voulu. Tester ici
Il reste 10 pour la marge de droite pour faire le total de 360px qui est la largeur voulu. Tester ici
Div 1 vue par IE: même calcul que la précédente
Voici une alternative que j'ai trouvé efficace pour centrer une div!
Voir mes démos Attention! yeux sensibles s'abstenir