Float beenden

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

HTML Newsletter: Was gilt es, zu beachten?

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/

Dust-Me Selectors findet ungenutzte CSS-Selektoren

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…)