Spaltenset Light

Es kommt des öfteren vor, dass 2 Spalten nebeneinander und mehrere Zeilen untereinander dargestellt werden, ohne dass das Konstrukt eine Tabelle ist.

Dieser Anwendungsfall kommt z.B. im Kontakt-Bereich einer Website häufig vor. Telefonnummer, E-Mail-Adresse usw. sollen bündig aufgelistet sein.

Durch den Einsatz von DIV-Spalten haben Sie volle Flexibilität. Sie können z.B. in Ihrer CSS-Datei für Mobile Websites folgendes festlegen:

• Die rechte Spalte der "Tabelle" wird unterhalb der linken Spalte dargestellt
• Die rechte Spalte hat einen Abstand von 20 Pixeln nach unten
• Oberhalb der linken Spalte wird eine gestrichelte Linie dargestellt
• In der ersten Zeile der ersten Spalte wird die Linie entfernt

Der Einsatz der beliebten Erweiterung "Subcolumns" (Spaltenset) im zuvor genannten Beispiel ist für diesen Fall unnötig und umständlich.

Grund: Bei einem flexiblen Layout und kleineren Bildschirmen / Smartphones entstehen ungewollte Verschiebungen von Spalten und Zeilen. verschobene Zeilen. Das kann nur umgangen werden indem für jede Zeile ein weiteres Spaltenset angelegt wird. Das stellt aber bei vielen Elementen einen extremen Mehraufwand dar.

Der Einsatz einer Tabelle ohne Linien wäre im Beispiel oben zwar möglich, aber daraus resultieren dann auch Probleme beim Responsive Design, falls eine Website stark verkleinert wird bzw. Smartphones zum Einsatz kommen.

Eine Lösung, die auch manchmal zum Einsatz kommt ist der Einsatz eines einzelnen Inhaltselements vom Typ "Text".
Innerhalb des Textes werden DIV-Container eingesetzt, die dann per CSS gefloatet werden.

Diese vorgehensweise funktioniert zwar, ist aber nicht flexibel genug und selbst für Administratoren und erfahrene Redakteure nur schlecht pflegbar.