HTML/CSS - Floaten - Ein kompliziertes Beispiel

1. Die Abschnitte

2. Die Datei

Lautet diesmal kompliziertes_beispiel.htm und liegt im schon bekannten Ordner. Auch habe ich schon einiges vorbereitet, was nicht wichtig für dieses Beispiel ist.

3. Das Ziel

Diesmal wollen wir mit so genannten "Liquid Columns" arbeiten. Dabei handelt es sich um eine Technik, wo das Layout sich fließend einer geänderten Standardschriftgröße anpasst (Strg +).

4. Der Quellcode

...wurde diesmal umgebaut. So befindet sich das rechts-Element diesmal vor dem mitte-Element! Warum denn das? Ganz einfach, weil es in diesem Beispiel nicht anders funktioniert. Hinzugekommen ist ein weiterer <div>-Container namens content.

5. Die ersten CSS-Anweisungen


div.links
{
  width: 20em;
  float: left;
}   
     
div.rechts
{
  width: 20em;
  float: right;
}

Erläuterung

Mit width: 20em; legen wir eine relative(!) Breitenangabe fest. Das muss so sein, damit beim Vergrößern der Schrift im Browser sich die Breite der beiden Elemente anpasst. Man könnte auch mit Prozentangaben arbeiten, aber nach meinen Erfahrungen kann es da bei komplexeren Layouts schon mal Probleme geben.

Das float: left; kennt ihr ja schon. Aber das float: right; beim rechts-Element ist neu. Damit sorgen wir dafür, dass Text des nachfolgenden mitte-Elements links(!) vom Bereich rechts steht.

6. Hm, komisch

Irgendwie sieht das noch gar nicht so aus, wie wir es eigentlich haben wollen. Das mitte-Element zieht sich über die gesamte Breite und das unten-Element lümmelt sich irgendwo in der Gegend herum.

Der mittlere Bereich

Um den auf Linie zu bringen, reicht eine Anweisung aus, die den linken und rechten Außenabstand definiert.


div.mitte
{
  margin: 0px 23em 0px 23em;
}

Der untere Bereich

Da könnte man nun auf die Idee kommen und ganz einfach beim content-Element einen Abstand nach unten definieren:


div.content
{
  margin-bottom: 10px;
}

7. Der Stein der Weisen

Ist auch richtig, aber! Wir haben zwei gefloatete Elemente, nämlich links und rechts. Also richtet sich mit obiger Anweisung der Abstand nach unten an dem Inhalt des Elements mitte. Und je nach Auflösung ist dann die Höhe geringer als zum Beispiel beim rechten Element. Daher benötigt man noch etwas, dass innerhalb von content das ganze Rumgefloate beendet. Darum braucht man unterhalb von mitte noch einen "leeren" Container, der alles aufhebt:


<div class="clear">&nbsp;</div>

Leider haben wir jetzt einen zusätzlichen schwarz umrahmten Kasten, der da irgendwie sinnlos in der Gegend herumsteht. Um den weg zu bekommen, muss man ziemlich rabiat vorgehen:


div.clear
{
  clear: both;
  font-size: 0px;
  line-height: 0px;
  height: 0px;
  padding: 0px;
  border: none;
}

Erläuterung

clear: both; hebt beide Floats auf, sicher ist sicher (und einfach). Alle Angaben mit den 0px werden benötigt, damit dieses Element keine Höhe bekommt, und border: none; setzt die zugegebenermaßen wenig praxistaugliche Anweisung border: 1px solid #000; für alle <div>-Elemente außer Kraft.

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt