Hauptmenü

Untermenü

HTML/CSS - Floaten - Das Grundprinzip

1. Die Abschnitte

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