Den Text in einem <div> um ein untergeordnetes Element herumführen

Question

In Word können Sie ein Bild auf einer Seite platzieren, so dass der Text schön um das Bild herumfließt. Ich habe mich gefragt, wie weit man dies mit CSS erreichen kann, wobei zu beachten ist, dass es im IE6 funktionieren muss.

Ich habe bereits etwas in der Nähe mit Float, aber das schwebende Kind-Element noch "Blöcke" Text darüber. Es wird also teilweise umbrochen. Ist es möglich, ein Kind div an einer beliebigen Position in der übergeordneten setzen, und haben Text fließen um es frei?

Der eigentliche Anwendungsfall besteht darin, Illustrationen innerhalb des Hauptinhalts zu platzieren, wobei jede Illustration in einem Kindelement implementiert ist.

Ich wiederhole, es muss mit IE6 funktionieren. Und ich möchte mich nicht zu sehr mit browserspezifischen Hacks befassen... das Kind funktioniert zumindest auf dem IE6, ohne dass ich etwas ändern muss.

Derzeit habe ich so etwas:

<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

Soweit ich weiß, besteht die einzige Möglichkeit darin, das schwebende Div zwischen die Textzeilen zu setzen.

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