La barre de défilement affecte la propriété margin:0 auto ; et déplace la page de quelques px vers la droite.

Question

Voici un extrait de mon code :

<div id="column2">
  <div id="textbox">
    <h3>About</h3>
    <div id="text">
      <img id="portrait" src="images/portrait.png"/>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sollicitudin tristique posuere. Phasellus quis rhoncus felis. </p>
      <p>Curabitur condimentum gravida lorem, non accumsan justo facilisis non. Nam at nisi venenatis tortor viverra posuere.</p>
    </div>
  </div>
</div>

Code CSS pour cet extrait :

#textbox {
    background:lightgrey;
    margin:38px 0 0 0;
    width:400px;
    font-size:0.825em;
    line-height:150%;
}

#textbox p {
    margin-top:0;
}

#textbox h3 {
    margin: 0 0 15px 0;
}

#column2 {
    float:right;
    margin-right:150px;
}

#portrait {
    float:right;
    margin:0 0 10px 10px;
}

Ce qui ne va pas, c'est que lorsque je n'ai pas d'image dans la division "textbox", le centre est différent du centre avec une image. J'utilise margin : 0 auto ; pour centrer la div wrapper entière qui n'est pas incluse ici. Je pourrais probablement le centrer correctement avec un positionnement absolu (je ne l'ai pas encore testé), mais pourquoi l'image affecte-t-elle le centre ? La div wrapper entière se déplace d'environ 5-10px vers la droite, à cause de l'image (je l'ai testé). Avez-vous des suggestions ? Merci beaucoup.

Violon : http://jsfiddle.net/uVSTJ/1/

Edit : si je n'utilise pas de positionnement central, aucun problème ne se produit.

Edit 2 : J'ai trouvé le problème, mais je ne sais pas comment le résoudre. Cela ne se produit que lorsque j'atteins le bas d'une page et qu'une barre de défilement apparaît. Je suppose qu'il commence à calculer les marges ou quelque chose d'autre à partir d'un endroit différent, ce qui se traduit par + plusieurs pixels à droite. Y a-t-il un moyen de résoudre ce problème sans utiliser la propriété overflow ?

Answer 1

5 à 10px me fait penser à une barre de défilement. Peut-être que l'image fait que la hauteur de la page web dépasse la hauteur de la fenêtre, auquel cas une barre de défilement est ajoutée. Cela fait que le contenu se déplace un peu.

Answer 2

Quels sont les styles pour #text ? Et un violon serait vraiment utile, parce qu'il y a mai être un précédent divs avec des styles qui pourraient affecter la mise en page.