Hauptmenü

Untermenü

HTML/CSS - Floaten - Eine elegante Lösung

1. Die Abschnitte

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"."; 
  displayblock;             
  clearboth; 
}

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 
{
  ...
  visibilityhidden;
  height0;
}

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