Finde den Floatfehler :-)

Der kleine Frosch

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

Code

.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;
}

Alles anzeigen

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

Danke fürs schauen.

djheke

Deine Grafik verrät mir, dass noch ein cler:left im Spiel ist. Aber was möchtest du denn umsetzen?

Der kleine Frosch

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.

Der kleine Frosch

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

Tags