Hauptmenü

Untermenü

HTML/CSS - Floaten - Ein einfaches Beispiel

1. Die Abschnitte

2. Die Datei

Für diesen Abschnitt benötigt ihr die einfaches_beispiel.htm, die ihr im Ordner html_css_floaten findet. Ein paar CSS-Anweisungen gibt es auch hier schon, weil die mit dem floaten nichts zu tun haben.

3. Das Ziel

Das übliche Gestaltungsraster mit 3-spaltigem Layout, also nichts Wildes.

Einfaches Beispiel

4. Der benötigte Code


div.links
{
  floatleft;
  width100px;
  margin-right10px;
  margin-bottom10px;
}
        
div.mitte
{
  floatleft;
  width400px;
  margin-right10px;
  margin-bottom10px;
}
        
div.rechts
{
  float:left;
  width114px;
  margin-bottom10px;
}
        
div.unten
{
  clearleft;
}

Erläuterung

Wie ich schon beim Grundprinzip erklärt habe, sollte man alle Elemente, die nebeneinander stehen, mit einem float und einer Breitenangabe versehen. Das haben wir hier bei den drei <div>-Elementen links, mitte und rechts getan.

Aber warum bekommen alle ein margin-bottom: 10px;? würde nicht ein margin-top: 10px: beim unteren Element unten reichen? Nein, probiert es aus. Das clear: left; bei selbigem erklärt sich wohl von selbst.

5. Tipps

Spielt ein wenig mit dem CSS-Code herum. Baut die Anweisungen Stück für Stück ein und beobachtet genau, was passiert. Oder ändert mal die Werte, nehmt Text aus dem einen Element und setzt ihn in ein anderes. Da werdet ihr ziemlich schnell begreifen, wie alles zusammenhängt. Ach ja, sollte jemand versuchen, den mittleren drei Elementen eine flexible aber identische Höhe zu verpassen, dem sei dies gesagt. Das geht nicht so einfach. Dazu komme ich später.

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