Felix Riesterer: float und clear richtig eingesetzt... wirkt Wunder

Beitrag lesen

Liebe(r) J.P.,

Es geht darum, dass Inhalte aus div's rausspringen.
<div style="border:2px solid green;background-color:#CDCFBA;">
<a href="" style="display:block;float:left;border:2px solid #EAEBE2;text-decoration:none;padding:5px;">11</a>
<a href="">12</a>
<a href="">13</a>
<a href="">14</a>
<a href="">15</a>
</div>

handelt es sich hier wieder um einen Fall von Divitis? Ich vermisse einen semantischen Kontext, in welchem diese verlinkten Zahlen von 11 bis 15 stehen (eine nummerierte Liste vielleicht?)...

Du weißt schon, dass wenn Du ein Element (erster Link) floatest, dass dann das Elternelement schon "früher zu Ende" sein kann, wenn es selbst nicht auch gefloatet ist? Versuche einmal dem letzten Link in Deinem DIV ein clear: left zu geben! Wenn nämlich innerhalb des Elternelements ein float durch ein clear wieder ausgeglichen wird, dann ist das Elternelement nämlich nicht mehr "früher zu Ende", sondern muss das gefloatete Element komplett umschließen.

Meine Formulierung mag angesichts der späten Stunde (ja, ich bezeichne das als "vor dem Schlafengehen") sachlich nicht unbedingt korrekt sein, aber sie erklärt das Browserverhalten so, dass Du Dein Problem lösen können solltest.

Viel Glück! Und schreibe bitte semantischeren Code als das obige Beispiel!

Liebe Grüße aus Ellwangen,

Felix Riesterer.