Solo: Image überlappt Div-Bereiche

Beitrag lesen

Ach du schande... nachdem ich jetzt was schnödes gebastelt habe passiert forgendes:
wenn im unten gezeigten Code ein Image eingebettet ist, überlappt es den Div-bereich indem es drin ist...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="de-CH">
<head>
<style type="text/css">
.boxcontainer{
    width:400px;
    border:1px solid #03f;
    border-color:#06c #039 #039 #06c;
    background-color:#9cf;
}
.boxtitle{
    margin:2px;
    border:1px solid #06c;
    border-color:#6cf #039 #039 #6cf;
    background-color:#06c;
    padding:0 2px;
    color:#fff;
    font-weight:bold;
}
.boxmain{
    margin:2px;
    border:1px solid #999;
    border-color:#039 #fff #fff #039;
    background-color:#eee;
    padding:2px;
}
.boxfooter{
    margin:2px;
    padding:2px;
}

</style>
</head>
<body>
<div class="boxcontainer">
<div class="boxtitle">Der Titel</div>
<div class="boxmain">Hauptbox<br>
<img src="/images/test.gif" width="150" height="200" align="left">
Text...blabla
</div>
<div class="boxfooter">Der Footer</div>
</div>
</body>
</html>

eigentlich sollte der graue Bereich der Hauptbox bis zum ende der Grafik gehen und diese umschliessen... leider hört der graue Bereich aber schon nach dem Text auf und die Grafik überlagert die unteren Divs...

Any Ideas?!?