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 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

Answer 2

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 :)

Answer 3

Absolute positioning does not let you wrap text. You have to use float and position using margin or padding.

Answer 4

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 :)

Answer 5

Here's a trick that might work for some:

if you have a container packed with a lot of objects, and you want that positioned object to appear up high in certain cases, and down lower in other cases (various screen sizes for example), then just intersperse copies of the object multiple times in your html, either inline(-block), or with float, and then display:none the items you dont want to see according to the conditions you need.

Here is a JSFiddle to show exactly what I mean: JSFiddle of right positioning high and low

Note: I added color only for effect. Except for the class names, the subject-1 and subject-2 divs are otherwise exact copies of each other.

Answer 6

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.