Question

This is an excerpt from my 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>

CSS code for that excerpt:

#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;
}

What is wrong is that when I don’t have an image in “textbox” div, the center is different than the center with an image. I am using margin: 0 auto; to center whole wrapper div that is not included here.
I would probably be able to center it properly with absolute positioning (didn’t test it yet), but why the image affects the center? The whole wrapper div goes about 5-10px to the right, because of the image (I tested it). Any suggestions? Thank you very much.

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

Edit: if i’m not using any center positioning, no problem occurs.

Edit 2: I found the problem, but don’t know how to solve it. It only happens when I reach the bottom of a page, and a scrollbar appears. I suppose it starts calculating margins or something from a different place, what results in + several pixels to the right. Any way to solve this without using overflow property?

Answer 1

5 to 10px reminds me of a scrollbar. Maybe the image causes the heigth of the web page to exceed the height of the window in which case a scrollbar will be added. This causes the content to move a little bit.