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

Publié le par PêUR

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:

Sans débordement horizontal

Avec 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:

Succession 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:

Images trop larges

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:

Mise en forme en italic

Zoom

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.

 

Publié dans Faq

Commenter cet article

vinz06 15/04/2007 12:12

Bonjour,
Peut être pourras tu m'aider car je ne trouve pas de réponse à mon problème: voila le fil de discution overblog:
http://forum.over-blog-v2.com/thread-2576337-99999.html
merci

PêUR 15/04/2007 23:30

Désolé mais mon pc rame trop à ouvrir ta page d'accueil.

Comac 23/03/2007 18:28

Bonjour,

Pour contrer la colonne de droite qui passe en dessous avec IE quand il y a du texte en italique, j'ai choisi de reduire l'espace entre les lettres pour les tags "".

i {letter-spacing : -0.04;}/* valeur en pixels */
ou
i {letter-spacing : -0.04em;}/* valeur relative à la taille de la lettre */

Ca modifie un peu l'aspect visuel mais la colonne reste bien sagement à sa place... ;-)

PêUR 23/03/2007 20:36

D'autres solutions liés à ce bug IE: http://positioniseverything.net/explorer/italicbug-ie.html :)

Martien 15/03/2007 11:18

Pour moi le problème n'est pas que les collonnes de gauche de droite se décale, la colonne de droite s'est placé en dessous de mon article dans la colonne centrale,

sophkyro 26/02/2007 11:14

bonjour,
voilà j'ai un problème avec mon site . Tout le menu passe après mes articles . J'ai lu ton article d'aide avec attention mais je ne vois rien qui résolve mon problème . Je n'ai ce problème que depuis hier , et je n'ai touché à aucune des colonnes , j'ai juste rajouté un article . Je te remercie d'avance pour ton aide .

PêUR 03/03/2007 13:31

Tu as dus résoudre le problème, ce n'est plus le cas.

Did 27/01/2007 18:24

Kikou Peur ! J'ai encore une fois besoin de ton aide précieuse :

En effet j'aimerais changer le modèle de mon design et mettre le city lights (id :205)
Le problème c'est que du coup tout mes modules se retrouvent en bas de page et c'est un bordèle pas possible. (http://didart.over-blog.com/ )En plus ca fait un moment que j'ai décrocher et je serai incapable de m'y retrouver dans le css.
Que dois-je alors corriger pour avoir un design correct bien centré.

Merci à toi

PêUR 27/01/2007 23:51

Pour changer de modèle il faut supprimer le css personalisé. Pour cela, il faut décocher la case "je souhaite modifier moi-même mon css" puis valider. Ensuite tu choisis ton nouveau modèle.