CSS Image Float Text Wrap Problem...

[jesseainskeep]

I have a little CSS Problem I was wondering if someone could help me with.

I have 3 paragraphs with 2 images. I want to float 1 image to the left and 1 to the right. This is no problem. The text wraps around it, it's all fine and dandy, untill.....

I try to move the image either up or down. I don't want the top of the image to line up with the top of the paragraph. I want the image to shop up like in between the paragraphs. My code as of now is as follows.

<p>Paragraph here</p>
<img src="img.jpg" alt="alt" style="float: left; padding: 5px; position: relative; " />
<p>Paragraph here</p>
<img src="img.jpg" alt="alt" style="float: right; padding: 5px; position: relative; " />
<p>Paragraph here</p>


If I try to put the pictures at the top, then use a 'margin-top: 100px' for instance to push them down, it creates a 100px white space above the image. If I put the images where they are then add a 'margin-top: -50px' then the top paragraph overlaps on top of the image.

Any suggestions? I don't want to add the <img> tags inside of the <p> tags. Any way to move the images up or down without creating white space or overlapping?

Thanks in advance.

[The Little Guy]

to the image tag add align="left" or align="right"

You will have to put the img tag in the p tag, and float both the image and the P tag left.

[jesseainskeep]

The site is purely CSS, so I try not to add anything like align.

[ray326]

Maybe this will provide some hints.

http://www.alistapart.com/articles/crosscolumn/