Text Wrapping Around An Absolute Positioned Div

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)

Solution 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 -50px10px10px ;
}
.rightimage:before {
  content: '' ;
  display:block;
  float: right;
  height: 200px;

}

You can check it out here:

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

Solution 2:

Absolute positioning takes the element out of the normal document flow, and therefore it does not interact with the other elements. Perhaps you should revist how to position it using float instead, and ask about it here on Stack Overflow if you get stuck :)

Solution 3:

When you position a div absolutely, you're effectively taking it out of the document flow, so the other elements will act as if it's not there.

To get around this, you can instead use margins:

.myDivparent
{
   float: left;
   background: #f00;
}

.myDivhascontent
{
   margin-left: 10px; /*right, bottom, top, whichever you need*/
}

Hopefully that will do the trick :)

Solution 4:

As mentioned by @Kyle Sevenoaks, you are taking absolute positioned content out of the document flow.

As far as I can see, the only way to have the parent div wrap the absolute positioned contents, is to use javascript to set the width and height on each change.

Solution 5:

In my opinon, the "Absolute" trait is poorly named, because its position is actually relative to the first parent whos position is not static

<divclass="floated"><divstyle="position: relative;"><divclass="AbsoluteContent">
    stuff
  </div></div></div>