Felix Riesterer: Boxen in CSS zweispaltig anordnen

Beitrag lesen

Liebe Selfer,

ich habe mir für meine Homepage einen kleinen Admin-Bereich gemacht. Das Menü besteht aus fünf Formularen, in denen verschiedene Funktionen gehandhabt werden können. Alles ist in einem großen <div class="admin"> enthalten, was selbst auch wieder eine Box darstellt.

.admin { display: block; margin: 0 auto; text-align: center; }

Jedes Formular wird als Box angezeigt.

form { display: block; width: 45%; border: solid 1px #000000; }

Nun möchte ich, da die Höhe der Boxen unterschiedlich ist, die ersten drei Boxen links, die verbleibenden zwei Boxen rechts haben, so dass ein scheinbar zweispaltiges Layout entsteht. Ich habe schon mit float herumprobiert - vergeblich.

.admin form { float: left; }
.admin form.rechtsbuendig { float: right; }

Was ich erhalte sieht immer so aus:

+----+ +----+
| f1 | | f2 |
|    | +----+
+----+ +----+
       | f3 |
       +----+
  +----+ +----+
  | f4 | | f5 |
  +----+ |    |
         +----+

Ich hätte aber gerne:

+----+ +----+
| f1 | | f4 |
|    | +----+
+----+ +----+
| f2 | | f5 |
+----+ |    |
| f3 | +----+
+----+

Wie bekomme ich das hin? Ich verstehe vor allem nicht, wie ich die Reihenfolge in den Griff bekomme. Wer weiß Rat?

Liebe Grüße aus Ellwangen,

Felix Riesterer.