Make text in a wrapper <div> around a child

Question

In Word, you can put an image on a page and make good use of the flow of text. I was wondering how far this can be achieved with CSS, noting that this should work in IE6.

I already have something like using float, but the pop-up child still “blocks” the text above it. So it partially wraps around. Is it possible to place the child div in any arbitrary position in the parent element and is it free to flow around it?

An actual use case is to place illustrations inside the main content, where each illustration is implemented inside a child element.

I repeat, it should work on IE6. And I don’t want to interfere too much with browser hacks ... the floating child at least works on IE6 without any settings.

I currently like this:

<div> <div class="illustration"> <img src="image1.png" /> <p>Illustration caption</p> </div> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Atvero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p> </div> div.illustration { float:right; border-top: 1px solid #505050; border-left: 1px solid #505050; border-right: 1px solid #505050; border-bottom: 1px solid #505050; margin-right:30px; margin-top:100px; text-align:center; padding:2px; background: #96C3FF; } div.illustration p { margin:0; font-size:small; font-style:italic; padding:0; } 

Answer 1

As far as I know, the only way is to actually put a floating div between the lines of text.

 <div style="width: 600px;"> this text will go above the image. <img style="float:left;" /> this text will go next to and below the image. </div>