Problem mit float

[Uwe]

Hallo!

Ich habe ein Problem damit ein Element rechts neben Text zu platzieren.
Hier der HTML-Ausschnitt:

  
<article>  
    <figure>  
        <img src="image.jpg" alt="image" />  
        <figcaption>  
            <a href="http://example.tld/" target="_blank">Caption</a>  
        </figcaption>  
    </figure>  
    <h4>Header</h4>  
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pulvinar, nisl eu dictum vulputate, sem sem suscipit est, id ultricies augue massa sit amet enim. Nunc fringilla nisl vel justo faucibus a consectetur est vulputate. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque hendrerit metus eu nibh porta venenatis. Vivamus porta semper arcu ut laoreet. Cras nec quam lorem. Nulla hendrerit mi sed dui interdum condimentum. Suspendisse gravida facilisis purus molestie ultrices. Duis a placerat velit. Integer eu urna ac risus tempus ornare sit amet adipiscing risus. Integer sollicitudin pretium luctus. Mauris vel nulla id leo condimentum accumsan. Nulla id lectus ante, sed vehicula mi. Nullam a dignissim purus. Nullam luctus, dui vitae porta dignissim, augue elit suscipit leo, sit amet mollis mi erat sed risus. Nam scelerisque justo vitae nulla interdum at ullamcorper nulla porttitor.</p>  
</article>  

Und hier der CSS-Teil:

  
figure {  
    width: 151px;  
    background: url(layout/figure_background.jpg) top left no-repeat;  
    padding: 13px 7px 0 19px;  
}  
figure figcaption {  
    margin-top: 12px;  
}  
article {  
    margin-bottom: 20px;  
}  
article figure {  
    margin: 0 0 10px 10px;  
    float: right;  
}  

Damit steht das figure-Element rechts neben dem Text. Wenn der Text aber nicht vorhanden ist bleibt das article-Element so hoch wie h4 obwohl das figure-Element höher ist. Nachfolgende Elemente sind dann "verrutscht".

Dann habe ich die Reihenfolge im HTML vertauscht und den Text in einem div gruppiert:

  
    <div>  
        <h4>Header</h4>  
        <p>Lorem ipsum...</p>  
    </div>  
    <figure>  
        <img src="image.jpg" alt="image" />  
        <figcaption>  
            <a href="http://example.tld/" target="_blank">Caption</a>  
        </figcaption>  
    </figure>  

...und dem div float: left verpasst:

  
article figure {  
    margin: 0 0 10px 10px;  
}  
article div {  
    width: 400px;  
    float: left;  
}  

Das figure-Element ist dann aber nicht rechts vom div sondern liegt dahinter (das Hintergrundbild liegt unter dem Text), die img- und figcaption-Elemente sind unter dem div. Das sieht dann ungefähr so aus (der "Kasten" ist das figure-Element):

-------------
|Lorem ipsum|dolor sit amet, consectetur adipiscing elit. Donec pulvinar, nisl
|eu dictum v|ulputate, sem sem suscipit est, id ultricies augue massa sit amet
|enim. Nunc |fringilla nisl vel justo faucibus a consectetur est vulputate.
|   IMAGE   |
|FIGCAPTION |
-------------

Wo ist mein Fehler? Ich hab doch auch sonst keine Probleme mit CSS...^^
Danke für Eure Hilfe!

Uwe