Float lässt nachfolgende Elemente umfließen. Möchte man den Textumfluss abbrechen, so kommt ein zusätzliches div-Element, welches mit clear: das Umfließen der linken bzw. rechten Seite oder sogar beiden Seiten beendet, sehr gelegen.
Wer lieber auf das clear-Blockelement verzichtet, kann sich den folgenden Trick angewöhnen: gebt dem äußersten umschließenden Block eine Breite und Höhe sowie die CSS-Eigenschaft overflow: auto, die dafür sorgt, dass der Browser bestimmt, ob übergroßer Inhalt abgeschnitten wird oder herausragen soll, wenn er die Grenzen des Elements überschreitet.
Bevor ich´s vergesse, das display: block kann man sich bei gefloateten Elementen sparen, sie werden automatisch zu Blockelementen.
Hier ein Beispiel:
div.container {
border: 1px solid #000000;
overflow: hidden;
width: 100%;
}
div.left {
width: 45%;
float: left;
}
div.right {
width: 45%;
float: right;
}
Mal ehrlich: Tabellen sind zu vermeiden, inline CSS nicht gerade zu empfehlen und Webstandards das A und O. Ganz anders sieht es bei HTML E-Mails aus, denn dort gilt:
- CSS möglichst sparsam einsetzen
- Verwende inline styles
- Tabellen statt DIV-Container
- Vergiss das “background”-Attribut
Der Großteil der Newsletter-Abonnenten verwendet Outlook 2000/2003, dort war es noch möglich CSS Styles zum Setzten von Hintergrundbildern (background) oder zur Positionierung und Anzeige von Elementen (wie etwa position, float, display…) zu verwenden, nicht aber mit Outlook 2007.
Eine sehr gute Übersicht der CSS-Unterstüztung von internationalen Anbietern sowie den gängigsten Desktop-Clients hat Campaign Monitor: http://www.campaignmonitor.com/css/
Im IE6 funktioniert die :hover Eigenschaft nur auf Links. Sollte eure CSS Navigation nicht wie gewöhnlich aufklappen, liegt´s mit ziemlicher Sicherheit daran. Rätsel´s Lösung sind sogenannte DHTML Behaviors, die das Verhalten von DHTML Komponenten festlegen. Mehr über ihre Funktionsweise steht im Artikel von Jan Winkler.
Um jetzt eure Navigation IE6 tauglich zu machen, ladet auf http://www.xs4all.nl/~peterned/csshover.html die erforderliche csshover.htc-Datei herunter und bindet sie ein. Aktualisiert eure Seite und habt Spaß beim Auf- und Zuklappen eurer Navigation 
Wer den Überblick über seine Stylesheets verloren hat, kann mit Dust-Me Selectors, einer Firefox-Erweiterung, benutzte bzw. ungenutzte CSS-Selektoren finden und als CSV-Datei exportieren.
(more…)
