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).
6. Der Internet Explorer 6/7
Was freue ich mich auf den Tag, wo diesen beiden Browser das Zeitliche segnen. Aber bis dahin müssen wir uns mit den üblichen Hacks beschäftigen. In diesem Fall nutzen wir mal wieder eine dessen Eigenheiten aus.
/* IE 6 */
* html div.content
{
height: 1px;
}
Erklärung
Der Internet Explorer 6 zeichnet die Höhe eines Elements gewöhnlich so, dass der komplette Inhalt hinein passt. Ausnahmen sind
zum Beispiel die Eigenschaften overflow oder scroll bei der Anweisung display. Allerdings
bringt ihn dann eine Angabe wie height: 1px; völlig aus dem Tritt und veranlasst ihn, die Seite so darzustellen,
wie man es haben will.
Beim 7er dagegen funktioniert dieses Variante nicht. Daher zeige ich euch mal ein anderes Zaubermittel, was manchmal wahre Wunder bewirkt.
/* IE 6 und IE7 */
*+html div.content
{
display: inline-block
}
Erklärung
Fragt mich bitte nicht nach den Gründen. Da bin ich mir selbst noch in ganz im Klaren. Es hängt aber wohl mit dieser "hasLayout"-Geschichte zusammen. Also wenn ihr nicht mehr weiter wisst, probiert es einfach mal aus. Ach ja, das klappt natürlich auch im IE6. Darum hätte man das für beide Browser auch so schreiben können (wenn man nicht mit einer separaten Datei arbeitet).
/* IE 6 und IE7 */
html* div.content
{
display: inline-block
}