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.

Possible duplicate http://stackoverflow.com/questions/499829/css-wrap-text-around-a-bottom-right-div — jacktheripper, May 21 '12 at 19:05

IBBoard · Accepted Answer · 2012-05-21T19:16:19.517

8

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

edited May 21 '12 at 19:16

answered May 21 '12 at 19:07

IBBoard

909
4
16

This worked perfectly for me. I can make do with the margin-top: 1.1em fix. Thank you so much! – Jason Thuli May 21 '12 at 19:38
Feel free to call the span something other than "evilNonSemanticSpacer". I'm just a stickler for semantic markup (everything has and is used for a purpose that is accurate to its definition, e.g. `` for hyperlinks, `
` and not `
` for paragraphs) and while it works, adding the `` doesn't quite fit with that. It is structure purely for the purpose of getting something to sit right :)
– IBBoard May 21 '12 at 19:57

score 0 · Answer 2 · answered May 21 '12 at 19:03

0

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.

answered May 21 '12 at 19:03

marteljn

6,446
3
30
43

Thanks, but each page is dynamically driven, so I won't have that kind of control. – Jason Thuli May 21 '12 at 19:10
This is a total hack, but could you write some JS to dynamically place it after a given number of elements? – marteljn May 21 '12 at 19:26

float:right and relative positioning

2 Answers2