Image Floating Right over 2 paragraphs

[DesignerBill]

I've run into a sticky problem. Does anyone know a trick to make one image float right and have the text from two different paragraphs wrap around it?

I've found one way, by floating a small transparent image, same width, at the right of the second paragraph, and using relative position to move the second paragraph higher on the page. But the problem this causes is that the image is a link, and the second paragraph overlays most of it so the link doesn't work. I tried setting z-index but that didn't work either. Here a screen shot of the effect I want:

 

[CaldwellYSR]

Have the text in a div with only x width where x is the total width of the page minus the width of the image.For example...

<style type="text/css">
#textContainer {
  width: 800px;
  /* Whatever other styling */
}

#floatedImage {
  float: right;
  width: 160px;
  /* Whatever other styling */
}
</style>
<div id="textContainter">
  <p>lots of text goes here...</p>
  <p>more text goes here... </p>
</div>
<img src="link/to/your/image.jpg alt="words about image" id="floatedImage" />

 

[DesignerBill]

Thanks CaldwellYSR, but this didn't work; it put the image below the #textContainer. I did finally manage to achieve a suitable result by:

1. Expanding the image with margins at top and bottom and putting it at the top of the first paragraph.
2. Changing that heading "Custom Data Base Design..." from <h4> to <p> with bold formatting (but I know <h4> is better for the seo).
3. Enclosing the rest of the page text in a <div> and applying style position:relative and top:-15px.

This makes all but the very bottom 15px of the image work properly as the link, which is acceptable. Apparently, multiple paragraphs should wrap successfully around one image, if the image is large enough. I think what screwed me up before was the <h4> heading.

 

[PixelPusher]

I'm a bit confused here...this should happen naturally. Anyway try this:

<div>
   <img src="http://naziramin.files.wordpress.com/2011/08/apple-mac-logo.jpg" alt="Apple Icon"/>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas interdum, odio nec consectetur convallis, est nisi interdum leo, pretium porttitor quam purus at diam. Pellentesque pellentesque bibendum nisi. Integer in rhoncus neque. Maecenas nisl nisi, commodo eu luctus sed, accumsan eget arcu.</p>
   <p>uspendisse et augue enim, vel semper elit. Nam non ipsum nec lorem elementum ullamcorper. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

div {
width:500px; /* Temporary value */
overflow:hidden; /* Only needed if image height is greater than text height and you have preceding sibling elements */
}
div img {
float:right;
margin:0 0 7px 7px;
}
p {
font:normal 1em/1.3em "Trebuchet MS", Arial, sans-serif;
}