Float: right and relative positioning

Question

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

I need to place the image in one place on each page. And I need text to wrap around the top and bottom of the image.

http://jsfiddle.net/4AnsK/

Pay attention to the space for the image in the upper right corner? It does not move with the image. I understand why this is happening, but I cannot figure out how to make it work.

I tried to use relative positioning and set the "upper" value. I tried margin-top, padding-top, putting it in an absolute div container, etc. I can’t understand what it is. Any help is appreciated.

Answer 1

This seems to work, but it needs to hack a bit of HTML. Basically, you just need to place a zero-width slot above the image to drop it 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, wrapping the text around it. An example script is here .

There is a weirdness with text wrapping in Chrome (the line above is above the image). However, it does not appear in Firefox. The only thing I can fix in Chrome is margin-top: 1.1em in img , but it will also lead to a space above the image in Firefox (and possibly in other browsers).

Answer 2

Alternatively, you can simply put img after the second or third paragraph and remove top: 200px ? This will create a similar effect, although you cannot guarantee that it will be exactly 200px. Otherwise, you are out of luck, paragraphs will move around the starting position.