mal wieder ne frage an unsere css-spezis:
ich habe eine bildergalerie semantisch korrekt mit folgendem code:



Im normalfall wird das im browser so dargestellt (blau bild, rot beschreibung):


die bilder und ihre beschreibungen können nicht weiter verschachtelt werden, da das ganze sonst nicht valide ist. also können sie auch nicht direkt nebeneinander floaten. also hab ich erstmal jedem dt und dd width: 33%; und float: left; gegeben. ergebnis sieht folgendermaßen aus:


nun hab ich dd noch margin-left: -33%; margin-top: 10em; gegeben und schon sitzt die beschreibung unter dem dazugehörigen bild:


soweit sogut. jetzt kommt meine frage. denn was passiert, wenn nicht 3 sondern 4 oder mehr bilder da sind? dann siehts im safari 3.2, opera 9.2 und IE7 so aus:

man beachte: die erste beschreibung ist eine zeile länger als die zweite und dritte. darum ist das vierte bild unter dem zweiten. ist nicht so schön, aber das viel größere problem ist im firefox 3 zu sehen:

da werden die floatenden beschreibungen von den bildern der nächsten zeile überlagert. was kann ich denn dagegen tun?