Weitere Infos

Sie lesen:
LB1 (2009)

Little Boxes Teil 1 (Cover)

Hinweis

Diese Website ist von 2009 und inhaltlich zum Teil nicht mehr aktuell.

Aktuell (2020)

Einstieg in HTML und CSS (Cover)

WordPress

Einstieg in WordPress (Cover)

Beispielseiten

Inhaltsbereich

13.4.2 Drei Kästchen nach links floaten

In der ersten Übung werden alle drei Boxen nach links gefloatet. Das CSS dazu ist simpel:

div {
  float: left;
  font-weight: bold;
  width: 200px;
  height: 50px;
  padding: 10px;
  border: 1px solid black;
  margin: 5px;
}

Im Browser stehen die drei Boxen jetzt nebeneinander:

Abbildung 13.7: Mit float: left schweben die Boxen nebeneinander
Abbildung 13.7: Mit float: left schweben die Boxen nebeneinander

Das erste div schwebt an der rechten Seite der umgebenden Box (in diesem Fall also body) so weit es geht nach oben und schwebt dann so weit es geht nach links rüber. Jede folgende Box macht genau dasselbe, sodass die drei Boxen auf der Seite nebeneinanderstehen.