Сделать текст в <div>обтекании дочернего элемента

Question

В Word вы можете разместить изображение на странице и плавно обвести текст. Мне было интересно, как далеко можно продвинуться к этому, используя CSS, отмечая, что это должно работать в IE6.

У меня уже есть что-то вроде закрытия с использованием float, но плавающий дочерний элемент все еще «блокирует» текст над ним. Так что это частично оборачивает. Можно ли поместить дочерний элемент div в произвольную позицию в родительском элементе и свободно обтекать его текстом?

Фактический вариант использования здесь - поместить иллюстрации внутри основного контента, где каждая иллюстрация реализована внутри дочернего элемента.

Повторюсь, это должно работать на IE6. И я не хочу слишком увлекаться браузерными взломами ... плавающий дочерний процесс работает по крайней мере на IE6 без подстройки.

В настоящее время у меня так:

<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

Насколько я знаю, единственный способ - поместить плавающий div между строками текста.

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