float:right and relative positioning

Question

This seems like it should be a simple solution, but I can't seem to figure it out.

I need to position an image in the same spot on every page. And I need the text to wrap around both the top and bottom of the image.

http://jsfiddle.net/4AnsK/

Notice the space for the image at the top-right? It doesn't shift down with the image. I understand why this happens, but I can't figure out how to make it work.

I've tried using relative positioning and setting the "top" value. I've tried margin-top, padding-top, putting it in an absolute div container, etc. I can't seem to figure it out. Any help is appreciated.

Solution 1

This seems to work, but it needs a bit of a HTML hack. Basically, you just need to put a zero-width spacer above the image to push it down without affecting anything else.

Add this to the HTML, before the image:

<span id="evilNonSemanticSpacer"></span>

And use this CSS:

#evilNonSemanticSpacer {
    float:right;
    display:block;
    height:210px;
}
img
{
    float: right;
    clear:right;
}​

Remove the relative positioning from the image and it is in the right place with the text wrapping around it. The example fiddle is here.

There is an oddity with Chrome's text wrapping (the line above sits over the image). It doesn't appear in Firefox, though. The only way I can fix it in Chrome is with margin-top: 1.1em on the img, but that'll also result in white space above the image in Firefox (and possibly other browsers).

Solution 2

As an alternative, could just place the img after the second or third paragraph and remove the top: 200px? This will create a similar affect although you can't guarantee it will be exactly 200px. Otherwise you are out of the luck, the paragraphs will float around the original position.