HTML/CSS - Floaten - Eine elegante Lösung
1. Die Abschnitte
- Grundlagen
- Das Grundprinzip
- Ein einfaches Beispiel
- Ein kompliziertes Beispiel
- Eine elegante Lösung
- Gleiche Höhen
2. Die Datei
Ist diesmal die elegantes_beispiel.htm
. Den Ordner brauch ich ja wohl nicht mehr zu erwähnen. Dabei habe ich das Prinzip der
"Liquid Columns" sowie große Teile aus dem vorherigen Abschnitt übernommen.
3. Das Ziel
Diesmal wollen wir auf das "clearende" <div>
verzichten, da es genau genommen eigentlich ein
leeres Element ist, das der optischen Auszeichnung dient. Auch wenn dies über CSS geschieht. Daher müssen wir uns etwas
einfallen lassen.
4. Das Pseudoelement :after
Hinweis
Der Internet Explorer (wer auch sonst) kennt diese Anweisung sowohl in der Version 6 als auch 7 nicht. Dafür bauen wir uns dann am Ende einen Hack, so dass es in allen Browsern gleich aussieht.
Die Funktionsweise
Mit :after
kann man automatisch an ein Element Inhalte anhängen, also zum Beispiel Text oder Grafiken.
Und diese Eigenschaft machen wir uns zu Nutze. Also legen wir folgende Anweisung fest.
div.content:after
{
content: ".";
display: block;
clear: both;
}
Erklärung
Mit content: ".";
hängen wir einen popeligen Punkt an das Element <div class="content">
.
Da uns das der Lösung unseres Problems so noch nicht näher bringt, wandeln wir diesen Punkt mittels
display: block;
in ein Block-Element um. Damit wir nun den normalen Fluss wiederherstellen können, setzen
wir das mittlerweile wohl bekannte clear: both;
ein. both
, damit alle Floats, die wir vorher
gemacht haben, wieder aufheben.
5. Der Punkt
... sollte natürlich nicht sichtbar sein, da er doch ein klein wenig stört. Das stellt aber überhaupt kein Problem dar und wird durch folgende Ergänzungen erreicht.
div.content:after
{
...
visibility: hidden;
height: 0;
}
Erklärung
... ist ganz einfach. visibility: hidden;
versteckt den Punkt und height: 0;
reduziert die
Höhe auf Null. Warum hier kein display:none;
genommen wurde, ist wohl selbsterklärend (schaut mal nach oben).
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt