Finde den Floatfehler :-)

Mahlzeit! Ich habe da wahrscheinlich einen Anfängerfehler ....

Der rote Div will nicht an den oberen Rand. Alle grauen Div's sind komplett ident.
Normal müsste er doch von sich aus ganz nach oben floaten? Was hält ihn da unten?

.referate = umgebender Container

.referate {
    width: 90%;
    height:400px;   
}


.artikel {
    width:400px;
    height: 28px;
    padding: 7px;
    background-color:#999;
    float:left;
}


.detail {
    width:300px;
    height: 105px;
    background-color:#C00;
    float:left;
}

Der Strich unter dem roten Div ist das "Clear".

Danke fürs schauen.

Ja genau.

Vorher war da eine Tabelle (Foto). Jetzt wollte ich sie durch CSS ersetzen.

Muss ich die Einzeldiv's noch mal einen Überdiv packen, damit es der Rote Div als "gleichwertig" erkennt? Scheint mir unsauber zu sein.

Problem gelöst: Ich habe die einzelnen Div's in einen Überdiv gepackt, mit fixer Größe und diesem dann die Floateigenschaft zugewiesen.

Das ist alles viel komplizierter als eine Html-Tabelle, aber mit runden Kanten und Userfreundlichen "a"-tags sollte das CSS hier noch auf seine Kosten kommen. Für noch einfachere Lösungen bin ich immer zu haben .
LG