Why is the image moving my header (css) ?

Question

I have added an image to my header here:

http://www.forex-bloggers.com/

And for some reason that caused my site's title to move a bit right (instead of staying in the center).

Why did that happen, and can I fix it so it will go back to the center?

(Sorry for such a noob question, and thanks)

Answer 1

It's because floating will push the other elements to the side.

The quickest solution is to add "position:relative" to div#title, then on your image add: "position: absolute; top: 0, right: 0;" and remove "float:right;"

Answer 2

The Text Element now floats besides the Imagine and aligns its center with that new "Space", the easiest way would to compensate that by adding the width of the image as padding to the left side of the text padding-left:80px;