HTML/CSS - Floaten - Das Grundprinzip
1. Die Abschnitte
- Grundlagen
- Das Grundprinzip
- Ein einfaches Beispiel
- Ein kompliziertes Beispiel
- Eine elegante Lösung
- Gleiche Höhen
2. Die Daten
Für diesen Abschnitt benötigt ihr die Datei grundprinzip.htm
, die ihr im Ordner html_css_floaten
findet. Ein paar CSS-Anweisungen habe ich schon eingebaut, damit wir uns auf das Wesentliche konzentrieren können.
Öffnet nun die Datei sowohl in eurem Editor als auch in einem Browser eurer Wahl. Wir haben zwei
<div>
-Elemente mit den Klassen links
und rechts
. Beide sind mit einem farbigen
Rahmen versehen, damit ihr sofort seht, was beim Floaten passiert.
3. Wir floaten, wir floaten
So, jetzt ergänzt mal die CSS-Anweisung für div.links
um den Eintrag float: left
und seht euch an,
was passiert. Das linke <div>
läuft nicht mehr über die gesamte Breite des Browserfensters sondern nimmt
nur noch so viel Platz ein, den es für seinen Inhalt braucht. Interessant ist auch das Verhalten des anderen Elements. Schaut
euch den roten Rahmen an und ihr werdet erkennen, dass es jetzt genau genommen ganz links steht. Lediglich der Inhalt wird
solange eingerückt, bis wieder genug Platz da ist.
Der Inhalt
... ist das Entscheidende! Genauer gesagt, seine Menge. Schreibt mal spaßeshalber mehr Text in das linke
<div>
und beobachtet, die Veränderung. Dann werdet ihr schnell begreifen, was da eigentlich passiert.
4. Breitenangaben
Um nun eine genaue Kontrolle über die Layout-Umsetzung zu haben, sollte man in den meisten (nicht allen) Fällen mit Breitenangaben
arbeiten. Die können dann je nach Vorgabe absolut oder relativ gesetzt werden. Ergänzt daher mal das div.links
um
den Eintrag width: 400px;
. Allerdings ist damit das generelle Problem, nämlich das rechte Element komplett neben
das linke zu setzen, noch nicht beseitigt.
5. Noch mehr floaten
Man könnte nun auf die Idee kommen, das zweite <div>
mit einem margin-left:420px;
zu versehen.
Warum 420? Denkt an das Box-Model und unsere padding
-Anweisungen. Nun
diese Möglichkeit bestände durchaus. Allerdings kann es da bei dem einen oder anderen Browser zu Darstellungsproblemen kommen, wenn
man es mit einem komplexen Design zu tun hat.
Wichtig!
Bitte gewöhnt euch das nun Folgende an, dann habt ihr weniger Probleme. Wenn ein Element X ein float: left
bekommt,
so sollte dies auch beim nachfolgenden Element Y angewendet werden! Und beide sollten eine entsprechende Breitenangabe haben.
Probiert es mal aus. Ergänzt die CSS-Anweisung div.rechts
mal um ein float: left;
und width:
500px;
.
6. Clearen
Was aber, wenn man nun ein drittes Element hat, das unter den beiden anderen stehen soll? Legt in der HTML-Datei mal ein
<div class="unten">
an und schreibt ein wenig Text hinein. Je nach Größe des Browserfensters steht dieses
Element dann rechts neben dem <div class="rechts">
. Um nun den normalen Fluss wiederherzustellen, legt man
für das neue Element eine CSS-Anweisung mit der Eigenschaft clear: left;
an und alles passt wieder.
7. Verstanden?
Wenn ja, schön. Wenn nicht, dann schaut euch mal die folgenden Beispiele an, vielleicht begreift ihr es dann.
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt