Float-Problem

[Matze]

Hallo!

Ich habe mehrere Bilder in Definitions-Listen verpackt:

<dl>  
    <dt><img src="(...)" alt="(...)" /></dt>  
    <dd>  
        Beschreibung  
        Name: (...)  
        Größe: (...)kb  
    </dd>  
</dl>

Die Foratierung mit CSS sieht so aus:

dl {  
    list-style-type:none;  
    border:1px solid #CCC;  
    margin:0 5px 0 0;  
    padding:5px;  
    display:inline-block;  
/*    float:left; */  
}  
dl dt {  
    margin:0;  
}  
dl img {  
    border:1px solid #CCC;  
}  
dl dd {  
    margin:0;  
    padding:0 5px 0 5px;  
}

Nun zu meinem Problem.
Mit display:inline-block erreiche ich, dass die Listen schön in einer Reihe bleiben.
Wenn der Platz zu klein wird, wandern die Listen einfach in die nächste Zeile.
Problem a) dabei: Die Listen sind auf der Textlinie ausgerichtet. Ich möchte aber, dass die Listen oben "hängen". So, wie wenn ich sie mit float:left ausrichte.
Problem b) inline-block wird wohl noch nicht von allen Browsern verstanden. (ab IE7?)

Wenn ich die Listen mit float:left ausrichte wandern sie nicht bis ganz nach Links sondern, wenn die Liste links daneben kleiner ist als die davor, nur bis unter die Nachbarliste.
Das sieht dann ungefähr so aus
|--------| |--------|
|        | |   A    |
|   B    | |--------|
|        | |--------|
|        | |        |
|--------| |   C    |
           |        |
           |        |
           |--------|

Liste C soll aber nach links unter B.
Kann mir bitte jemand einen Tipp geben wie ich das erreichen kann?
Ich hoffe, ich konnte mein Problen ordentlich beschreiben.

Danke für Hilfe!

Matze