Beispielseiten

• float:left

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

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.