Make text in a <div> wrap around a child element.
- by John
In Word you can place an image on a page and have the text flow nicely around it. I was wondering how far one can get towards this using CSS, noting that is has to work in IE6.
I already have something sort of close using float, but the floated child-element still 'blocks' text above it. So it partially wraps. Is it possible to put a child div at some arbitrary position in the parent, and have text flow around it freely?
The actual use-case here is to put illustrations inside the main content , where each illustration is implemented inside a child .
I repeat, it has to work on IE6. And I don't want to get too involved in browser-specific hacks... floating the child at least works on IE6 with no tweaking.
Currently I have 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;
}
