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.3 Drei Kästchen nach rechts floaten

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
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.