Text Wrapping around an absolute positioned div

Question

I know there are a few questions about similar topics but they mostly amount to floating the div/image. I need to have the image (and div) positioned absolutely (off to the right) but I simply want the text flow around it. It works if I float the div but then I can't position it where I want. As it is the text just flows behind the picture.

    <div class="post">             <div class="picture">   <a href="/user/1" title="View user profile."><img src="http://www.neatktp.com/sites/default/files/photos/BlankPortrait.jpg" alt="neatktp&#039;s picture" title="neatktp&#039;s picture"  /></a></div>       <span class='print-link'></span><p>BlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlah.</p> <p>BlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlah.</p>         </div> 

Is an example of the HTML

With the CSS being:

    .picture img {         background: #fff;         border: 1px #ddd solid;         padding: 2px;         float: right; }  .post .picture {     display: block;     height: auto;     position: absolute;     right: -10px;     top: -10px;     width: auto; }  .post {     border: 1px solid #FFF;     border-bottom: 1px solid #e8ebec;     padding: 37px 22px 11px;     position: relative;     z-index: 4; } 

It's a Drupal theme so none of this code is mine, it's just that it's not fully working when it comes to putting a picture there.

Answer 1

I know this is an older question but I came across it looking to do what I believe you were trying to. I've made a solution using the :before CSS selector, so it's not great with ie6-7 but everywhere else you should be good.

Basically, putting my image in a div I can then add a long thing float block before hand to bump it down and the text wraps merrily around it!

img {   float:right;     clear:both;   width: 50% ;   margin: 30px -50px 10px 10px ; } .rightimage:before {   content: '' ;   display:block;   float: right;   height: 200px;  } 

You can check it out here:

http://codepen.io/atomworks/pen/algcz