Beispielseiten

• float:right

Im nächsten Schritt lassen Sie die drei Boxen nach rechts schweben. Dazu muss im CSS nur ein einziges Wort geändert werden:

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

Auch hier stehen die drei Boxen nebeneinander, aber achten Sie auf die Reihenfolge:

Abbildung 13.8: Mit float: right wird die Reihenfolge umgedreht

3 – 2 – 1. Die umgekehrte Reihenfolge der drei Boxen kommt daher, dass Box 1 an der linken Seite des umgebenden Elements ganz nach oben schwebt und dann so weit wie möglich nach rechts rüberschwebt, und die anderen beiden Boxen machen genau dasselbe.

Dieses Verhalten der Boxen ist eigentlich logisch, aber in der Praxis nicht immer das, was man gerne hätte.