Block um floatende Elemente formatieren

[Gernot Back]

Hallo Franz,

also habe ich doch beim letzten Mal richtig geraten!

  

> div#Seite {  
>   text-align: left;  
>   margin: 0 auto;  
>   padding: 0.5em;  
>   width: 760px;  
>   border: 2px solid black;  
>   background-color: #CC0000;  

     /* es fehlte, damit sich der rote Block  
        um die floatenden Kinder erstreckt: */  
     overflow:hidden;  

>   }  

/* ... */  

> ul#Navigation {  
>   float: left;  
>   text-align: center;  
>   margin: 0;  
>   border: 1px solid black;  
>   width: 150px;  
>   background-color: #CCCCCC;  

     /* das Default-Padding des Firefox willst du bei  
        deiner Liste wahrscheinlich auch nicht haben. */  
     padding:0;  

>   }  
  

Hier nochmal der Link, der das letzte Mal verstümmelt war, damit du das nachlesen kannst.

http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout#wunderwaffe-overflow

Für Netscape 7 und wahrscheinlich auch ältere Mozillas empfiehlt es sich übrigens, als letztes nach den floatenden Elementen ein <br class="clear" /> einzufügen.

In der Klasse .clear definierst du dann die Eigenschaft clear:left oder clear:right, je nachdem, wie deine Elemente davor floaten, denn ansonsten kann es sein, dass Netscape zwar den Block darum formatiert, die floatenden Elemente darin aber nicht anzeigt.

Gruß Gernot