css - Text & Image inside a div: How to overlap image over the div, but still wrap text around image? -

css - Text & Image inside a div: How to overlap image over the div, but still wrap text around image? -

summary

i own start-up online dating site in federal republic of germany (https://meineneueliebe.de) , stumped effort have image spills on containing div still have text within div flow around part of image still within div.

here's i'm trying accomplish (funky ascii fine 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 i'm trying accomplish on landing page https://meineneueliebe.de e.g. in box title "liebe im 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; }

here 1 way might work using negative margins.

consider next html:

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

apply next css:

class="lang-css prettyprint-override">.wrap { width: 300px; border: 1px dotted blue; overflow: visible; /* create sure overflow visible... */ } .image-panel { float: right; margin: 10px -150px 10px 10px; }

use negative right margin on floated element , project outside of parent container.

see demo at: http://jsfiddle.net/audetwebdesign/ckkru/

comment: negative margin right has effect of increasing overall width of parent block. shrink browser window, see horizontal bar appear when right border of image contacts right border of window.

css image text wrap overlap