Direktnavigation

Weitere Infos

Sie lesen:
LB Teil 1 (2009)

Little Boxes Teil 1 (Cover)

Aktuell (2015)
Einstieg in CSS

Einstieg in CSS (Cover)


2. Auflage!

Einstieg in CSS (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.