Getting an image to float correctly

[aaron.martone]

Please see the attached image. The image is red. The paragraph is blue (has some padding). I'm looking for the image staying there as the text in the paragraph continues downward (note that the paragraph text does not move to the beginning of the line once it is clear of the image) It stays flush to the right of the image.

[Paul O'B]

Hi,

If you place the image in its own container such as a p element and then give it a class that floats it left. You can then just add a margin-left to the other content that is wider than the image.

There is an old example here : (except that I would have preferred to put the image in a p element also just to keep it tidy).

http://www.pmob.co.uk/temp/nowrap.htm

However that will give the three pixel jog in IE6 when the text is lower than the height of the image.

A more advanced way is to utilise "haslayout" for IE and overflow for other browsers and you end up with a demo like this.

http://www.pmob.co.uk/temp/gallery-imageclear.htm

Hope that helps

[aaron.martone]

As, always, it worked flawlessly in FF, but I think I'm missing something in IE. IE's text is aligned perfectly except that there is about a line's worth of space that keeps the text's top from being flush with the top of the image.

Lookin over my code. Thanks for the post.

[Paul O'B]

Check the default top margins of the elements you are using. Firefox usually has a default of 1 em to most elements like paragraphs but IE only has a bottom margin by default.

Make them both the same.

It may be another issue but without seeing it's hard to guess