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?
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.