Zwei Felder nebeneinander & 4 untereinander

[molily]

Hallo,

Wie bekomme ich ohne Tabellen so eine Anordnung hin? Vielleicht auch auf RWD Rücksicht nehmen, was aber kein muss ist.

Da die Frage sehr allgemein ist, ist die Antwort allgemein: Mit CSS-Layout.

Genauer: Mit Floats, gegebenenfalls display: inline-block, gegebenenfalls mit CSS-Tabellen (display: table, table-row, table-cell).

Ist dir grundsätzlich das Arbeiten mit Float geläufig?

Tutorials:
http://de.learnlayout.com/
http://de.selfhtml.org/css/layouts/
http://blog.selfhtml.org/2006/01/31/css-spaltenlayout/

In deinem Screenshot sehe ich erst einmal eine Menge von Listenelementen, die 50% der Breite einnehmen und Spalten bilden. Das geht z.B. mit float: left und width: 50% für die betreffenden Elemente. Dann stapeln sie sich schon automatisch horizontal und dann vertikal.

In diesen Listenelementen gibt es ein Label, das links mit einer festen Breite floatet, oder display: inline-block hat. Daneben stehen oder mehrere Formularfelder mit bestimmten Breiten (width) und ein paar Abständen (margin).

»Responsive« bekommt man Float-Layouts über Media Queries. Üblicherweise wird die Mehrspaltigkeit erst ab einer bestimmten Viewport-Breite hergestellt. float wird also auf kleinen Bildschirmen nicht oder nur im Kleinen angewendet (z.B. um ein kurzes Label und ein Feld nebeneinander zu positionieren).

Wo genau hapert es? Fehlt dir der Ansatz? Den hoffe ich nun gegeben zu haben.

Mathias