How to overlap image over the div, but still wrap text around an image?

Question

Summary

I own a start-up online dating site in Germany (https://MeineNeueLiebe.de) and am stumped by my attempt to have an image that spills over its containing div but still have the text inside the div flow around the part of the image that is still inside the div.

Here's what I'm trying to achieve (funky ASCII art ahead)

+---- div -----------------+
| bla bla bla bla bla bla  |
| bla bla bla +--------------------+
| bla bla bla |                    |
| bla bla bla |                    |
| bla bla bla |        image       |  <-- image overlaps div
| bla bla bla |                    |
| bla bla bla |                    |
| bla bla bla +---------------------
| bla bla bla bla bla bla  |
| bla bla bla bla bla bla  |  <-- text wraps around image
| bla bla bla bla bla bla  |
+--------------------------+

You can see where I'm trying to achieve this on my landing page https://MeineNeueLiebe.de e.g. in the box with the title "Liebe I'm Mittelpunkt".

HTML:

<div class="widget_container LP-TextBoxes">
<h2>Liebe im Mittelpunkt</h2>
<div class="FP-image FP-image-heart"><img src="https://static.meineneueliebe.de/assets/images/FP-image-heart-star-150.png" alt="Liebe" /></div>
<p>Sie wollen sich auf Ihre Partnersuche konzentrieren und nicht auf die Bedienung komplexer Webseiten? Sie wollen trotzdem alle Funktionen, die eine moderne Partnervermittung zu bieten hat? Dann sind Sie bei <strong>MeineNeueLiebe.de</strong> genau richtig!</p>
</div>

CSS Code:

.LP-TextBoxes {
overflow: auto;
}

.FP-image {
display: block;
float: right;
padding-right: 10px;
}

.FP-image-heart {
width: 100px;
height: auto;
margin: 5px 10px 10px 20px;
}

Answer 1

Here is one way that might work using negative margins.

Consider the following HTML:

<div class="wrap">
    Lorem ipsum dolor sit amet... 
    <div class="image-panel">
        <img src="http://placekitten.com/300/200">
    </div>
    Sed sitamet erat augue. Morbi consectetur...
</div>

apply the following CSS:

.wrap {
    width: 300px;
    border: 1px dotted blue;
    overflow: visible; /* Make sure overflow is visible... */
}
.image-panel {
    float: right;
    margin: 10px -150px 10px 10px;
}

Use a negative right margin on the floated element and it will project outside of the parent container.

See demo at: http://jsfiddle.net/audetwebdesign/ckkrU/

Comment: The negative margin to the right has the effect of increasing the overall width of the parent block. As you shrink the browser window, you will see the horizontal bar appear when the right edge of the image contacts the right edge of the window.