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

Answer 1

I needed a similar solution to float a pullout quote (not an image) which would have variable length text inside. The pullout quote needed to be inserted into the HTML at the top (outside the flow of the text) and float down into the content with text that wraps around it. Modifying Leonard's answer above, there is a really simple way to do this!

See Codepen for Working Example: https://codepen.io/chadwickmeyer/pen/gqqqNE

CSS

/* This creates a space to insert the pullout content into the flow of the text that follows */
.pulloutContainer:before {
  content: '' ;
  display:block;
  float: right;
  /* The height is essentially a "margin-top" to push the pullout Container down page */
  height: 200px;
}

.pulloutContainer q {
  float:left;  
  clear:both;
  /* This can be a set width or percent, if you want a pullout that floats left or right or full full width */
  width: 30%;
  /* Add padding as you see fit */
  padding: 50px 20px;
}

HTML

  

      
      Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet.
    

    

       
Sed Aucteor Neque
       
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est.