Wrap text with margin around image - css

Question

Is there a way to wrap text in a div with a border and margin around an image with float: right?
So far, the best I was able to do was get the text wrapping correctly around the image but the border ended up behind the image.
EDIT
Here is a screenshot of what I was able to get it too look like:
http://www.tiikoni.com/tis/view/?id=6753a19
As you can see, the border ends up behind the image when I'm trying to get it to stop when it reaches the image border.
The code for this is:
<img src='images/mangos.jpeg' width='500px' style='float: right; border: 2px solid $theme; padding: 5px; margin: 0 5px 5px 5px;'>
<div style='font-size: 19px; white-space: pre-wrap; border: 2px solid #F6B616; padding: 5px; margin: 5px;'>
Text Here
</div>
EDIT 2
Sorry the question wasn't very clear. What I was after was effectively a small gap between the text and image border. The text and its border needs to wrap around the image and its border. Is there any way of achieving this?

Answer 1

What you are seeing is in fact perfectly normal. Imagine your text would become higher then the image, a true wrap would make the text proceed underneath the image, and not just in a single column to the left of the image. That is the entire purpose of a float after all (though it is often abused in all kinds of ways). Something like this:
+------+---+ +------+---+
|text |img| |text |img|
THIS: |text +---+ NOT THIS: |text +---+
|text text | |text |
+----------+ +------+
Your use case can be solved quite easily though, supposing your background is a solid color. You can just mask the text border that you see behind the image. Something like this:
<img src='path/to/image'>
<p>Lorem ipsum...</p>
img {
float: right;
box-shadow: 0 0 0 5px #FFFFFF, 0 0 0 7px #F6B616;
margin: 7px 5px 5px 13px;
width: 250px;
}
p {
font-size: 19px;
white-space: pre-wrap;
border: 2px solid #F6B616;
padding: 5px;
margin: 5px;
}
As you can see I added a double box shadow to to the image, that mimics the effect of a border with 5px margin. The big difference is the white form this shadow will mask the underlying border of the text, which produces the effect you are after.
There are other techniques, like working with pseudo elements (which could be useful in case you have a more complex background) but personally I find this method the easiest for your use case.