CSS et débordement vertical - Pourquoi ma colonne est passée en dessous?

Mise à jour le 20/01/2006 18:45

Si c'est la question que vous vous posez, voici un article qui va vous aider à vous en sortir seul(e) afin de repérer quel élément perturbateur impose se décalage.

1 / Explications

Si vous remplissez un aquarium à ras bord et que vous y ajoutez du sable, que se passe-t-il? Il n'y a pas suffisament d'espace pour contenir l'eau et une partie déborde. C'est le même principe avec les blogs de modèle 5 et supérieurs. L'aquarium représente votre blog, l'eau les colonnes et le sable l'élément pertubateur.

En effet dans ces modèles de blog et CSS (ci-dessous en haut), les colonnes sont des éléments flottants positionnés côte à côte. Si vous attribuez une marge supplémentaire à l'une de ces colonnes dans votre CSS, la plus à droite sera poussé et tombera en dessous des 2 autres (ci-dessous en bas), on parle alors de débordement horizontal:

Normalement, lorsque le contenu d'un élément est plus large que sa valeur width il doit se réorganiser dans l'élément ou si c'est possible, sortir des limites de l'élément sans modifier sa largeur. C'est le cas avec Firefox... Mais avec Internet Explorer, c'est une autre histoire et on tombe dans le cas ci-dessus.

Quels sonts ses éléments qui déclenchent ce débordement horizontal?

2 / Elements perturbateurs

Ils sont au nombre de 3:

• les succesions de caractères sans espace
• les images
• la mise en forme italique

>> Les succesions de caractères sans espace:

Dans l'exemple ci-dessus, on voit très bien le débordement horizontal provoqué par l'ajout de l'URL: http://peuetreunereponse.over-blog.com/archive-12-2005.com dans la colonne de gauche, module "sans espace". Cette succession de caractères sans espaces agrandit son contenant (sur fond vert pâle) et pousse les colonnes qui se trouvent à sa droite. Résultat la colonne la plus à droite passe sous tous les éléments.

En réduisant ce lien ou en le supprimant votre colonne de droite viendra se repositionner correctement. 

>> Les images:

Dans l'exemple ci-dessus, on voit très bien le débordement horizontal provoqué par l'ajout de l'image dans la colonne de gauche, module "image". Cette image, trop large, agrandit son contenant (sur fond vert pâle) et pousse les colonnes qui se trouvent à sa droite. Résultat la colonne la plus à droite passe sous tous les éléments.

En réduisant la largeur de l'image au dimension exactes ou inférieures de son contenant votre colonne de droite viendra se repositionner correctement. 

>> La mise en forme en italique:

C'est un bug absurde d'Internet Explorer qui considére que la mise en italique augmente la largeur du texte initial de quelques pixel.

Dans l'exemple ci-dessus à gauche, on voit très bien le débordement horizontal provoqué par une citation en italique dans la colonne de gauche, module "italic". Cet ajout de quelques pixels par Internet Explorer, voir détail ci-dessus à droite,  agrandit son contenant (sur fond vert pâle) et pousse les colonnes qui se trouvent à sa droite. Résultat la colonne la plus à droite passe sous tous les éléments.

Si vous êtes dans un cas où du texte est en italique, supprimer ce texte et voyez si cela répond à la question.