<div> kleiner als darinliegender Inhalt

[meow]

hiho,
Ich bastle immer noch an meinem kleinen Projekt. So, nun gibt es bei meiner Seite einen ganz blöden Fehler.

Auf dem Bild sieht man zwei News Einträge mit je einem Bild.

Hier noch der Code:

  
<h3>Pecunia non olet</h3>  
<p>  
<strong>Geschrieben von am 6.12.2008 um 21:02</strong>  
</p>  
<img src="pics/news/thumbs/Nebelwald.jpg" alt="Nebelwald" class="floatleft">  
<p>  
Text  
</p>  
</div>  
  
<div>  
<h3>Homini sani sepultur</h3>  
<p>  
<strong>Geschrieben von am 29.11.2008 um 14:02</strong>  
</p>  
<img src="pics/news/thumbs/W%C3%BCste%202.jpg" alt="Sanddüne" class="floatleft">  
<p>  
text  
</p>

und css:

  
* #text div h3 {  
 display: block;  
 width: 100%;  
 border-bottom: 2px solid #58a2f4;  
 margin : 10px 0 10px 0;  
 padding : 0;  
    font-size: 1.4em;  
 color: #58a2f4;  
}  
* #text div p {  
 padding: 0 0 0 10px;  
 font-family:Georgia,"Times New Roman",Times,serif;  
}  
img.floatleft {  
 margin : 5px 30px 0 10px;  
 float: left;  
}

Also, das Problem ist, dass das Bild manchmal über die Überschrift des nächsten Artikels hinausragt. Ich weiss, dass es daran liegt, dass ich zuerst das Bild und dann den Text im Code aufgeführt habe und der Browser einfach am Schluss des Textteils das Ende sieht.

Doch was muss ich machen um dies zu ändern?

Herzlichen Dank
meow