Centrage et alignement de blocs imbriqués

Les calques sont déclarés dans la page (et dans un calque "mère") dans l'ordre suivant : de haut en bas et de gauche à droite. Les règles de style pour le calque-mère sont :

{width:600px; height:400px; margin-left:auto; margin-right:auto}

Dans ce premier groupe de blocs imbriqués, vous voyez les règles de styles utilisées. Vous constatez ainsi qu'il s'agit de calques SANS bordure et SANS marge.
N.B. : pour être en conformité avec les recommandations du W3C, il faut ajouter   position : relative   à chacun des sélecteurs même si, comme ce test le démontre, cela paraît être la valeur par défaut.
     Tout va bien avec les 2 navigateurs de test, mais il aura été nécessaire d'installer la règle   text-align:center   pour obtenir le centrage de l'ensemble par Internet Explorer. Mozilla se sera contenté, de manière logique et conforme, des règles de style   margin-left : auto ; margin-right : auto   installées dans le bloc conteneur que l'on pourrait également nommer calque mère. Notez que son concurrent accepte également de centrer le bloc ... mais le restant de la page aussi en insérant la règle  text-align:center   dans le même sélecteur, ce qui est beaucoup moins logique : la traduction de cette propriété parle d'elle-même. Cet inconvénient peut toutefois être éliminé à la condition de rectifier le tir (par un   text-align:left   ajouté dans le ou les blocs suivants.

Si vous avez (et si ce n'est pas le cas, vous n'êtes pas encore au point) les deux navigateurs, faites la comparaison : tout baigne grâce à ces petits "arrangements" !

Mais là où ça ne va plus du tout, pour Internet Explorer, c'est dans le groupe de blocs suivant :

TENTATIVE de centrage de blocs imbriqués ...

Pour faire "plus joli", pourquoi ne pas entourer ce bloc d'une bordure ... ?

Ce n'est que l'ajout d'un   border:5px solid black   dans le calque parent qui a provoqué cet imbroglio ! IE n'ajoute pas cette bordure mais l'inclut dans les dimensions du calque parent dont les "enfants" sont dès lors trop à l'étroit ... et s'installent là où la place est disponible ...

Une autre tentative dans l'espoir de mettre les deux protagonistes d'accord se solde cette fois par un résultat qui va à l'opposé :

Nouvelle TENTATIVE de centrage de blocs imbriqués ...

Essayons d'installer une marge dans chacun des blocs ... pourquoi pas ?

Attention : à partir d'ici, Mozilla fera un affichage paraissant incohérent : texte et blocs se chevaucheront gaiement !

---

Et pourtant, j'ai simplement ajouté le même   border  , mais cette fois dans chacun des blocs "enfants" avec des couleurs différentes. Mais là n'est pas le problème : il réside dans l'interprétation différente des styles attribués. Ici encore, c'est la même raison que celle qui a provoqué l'éclatement du bloc précédent par IE mais en provoquant, cette fois, une réaction similaire chez Mozilla : celui-ci ajoutant les bordures aux calques enfants provoque leur éclatement....

Remettons nous toutefois à l'ouvrage ... pour une dernière tentative :

Dernière TENTATIVE de centrage de blocs imbriqués ...

---

Internet Explorer s'en sort bien, ici aussi, tandis que Mozilla éclate complètement la disposition des blocs ...
Et pourtant, le seul ajout intervenu dans chacun des blocs internes consiste en l'utilisation de la propriété   padding  .
Ici aussi, Mozilla ajoute cette espace interne à l'intérieur des calques enfants qui, une fois de plus, se trouvent "à l'étroit" dans leur calque mère et s'installent dès lors là où il y a de la place ... Ici, pour les puristes, cette réaction peut paraître incohérente ...

A l'évidence, l'utilisation de bordures, marges et espacements posent de sérieux problèmes pour permettre un affichage identique ou, au moins, cohérent pour les différents navigateurs existant sur le marché.

En conclusion, vous l'aurez constaté, il importe d'utiliser les différentes possibilités d'alignement des blocs avec beaucoup de prudence. Certaines propriétés restent difficiles à mettre en oeuvre pour satisfaire tous vos visiteurs et, à moins que vous vous contentiez des utilisateurs d'IE5 et suivants (qui constituent tout de même plus de 80% des surfeurs), adoptez les solutions les plus simples ... en composant.

Ah oui ! Dernière petite chose mais qui va vous inciter, sans doute, à farfouiller dans le code source de cette page : elle est l'illustration de l'expression exacte Cascading Style Sheets. Si vous avez cette curiosité, vous remarquerez qu'il est fait appel à 1 feuille de styles externe mais que certaines balises contiennent, elles aussi, un certain nombre de règles de style. Cela traduit parfaitement la signification des CSS : feuilles de style en cascade, les bien nommées !