Gleich hohe Spalten mit CSS

Gleich hohe Spalten in CSS

Die Arbeit mit Prozentangaben für die height-Eigenschaft in CSS kann relativ frustrierend sein. Wenn man Layouts baut, aber auch schon, wenn man nur versucht mehrere, gleich hohe Spalten zu erzeugen. Für das Erstellen von Spalten gibt es verschiedene Techniken, u.a. viel padding + negativer margin, divs endlos schachteln, wiederholende Hintergrundbilder, absolute Positionierung, etc. Ich habe mir zwei Techniken angesehen, die nicht zu kompliziert sind und keine Bilder und zusätzliches Markup verlangen.

Um genau zu sein, mussten folgende Voraussetzungen erfüllt werden:

  • Keine zwanghafte Verwendung von Hintergrundfarben oder -bildern
  • Abstand zwischen den Spalten muss möglich sein
  • Kein übertriebenes Schachteln von divs
  • Vergeben von Rahmen um die Spalten muss möglich

Gleich hohe Spalten mit Flexbox

Diese Variante gefällt mir natürlich am besten, weil sie sauber und unkompliziert ist. Das einzige Problem an der Lösung mit Flexbox ist, dass es um die Browserkompatibilität nicht sehr gut steht. Von den meisten modernen Browsern wird es schon – oder zumindest teilweise – unterstützt. In Internet Explorer leider erst ab der Version 10.

Gegeben ist eine Liste mit drei lis. Das erste und dritte li sollen sich an der Höhe des zweiten anpassen.

<ul>
   <li>Spalte 1</li>
   <li>
       Spalte 2
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis   egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>  
   </li>
   </li>
   <li>Spalte 3</li>
</ul>

Für die ul muss die display:flex Eigenschaft vergeben und definiert werden, dass die Spalten gleichmäßig aufgeteilt werden sollen.

ul {   
    display: -webkit-box; /* Alte Safari, Chrome, iOS und Android */
    display: -moz-box; /* Alte Firefox */
    display: -ms-flexbox; /* IE 10 */
    display: -webkit-flex;  /* Safari, Chrome, iOS und Android */
    display: flex;

    /* Elemente werden gleichmäßig aufgeteilt. */
    /* Das erste ganz links und das letzte ganz rechts */
    -ms-flex-pack: justify; /* IE 10 */
    justify-content: space-between;
} 

Die lis benötigen dann nur mehr die Breite und gegebenenfalls padding und/oder border.

li {  
    width: 32%;
}

Ein live-Beispiel findest du in diesem Codepen.

Gleich hohe Spalten mit display: table-cell

Eine weniger elegante Variante, um das Ziel unter den gegebenen Voraussetzungen zu erreichen ist die Verwendung von display: table-cell;. Der große Vorteil daran ist die Browserkompatibilität, da diese Technik auch in IE 8 funktioniert.

Gibt man den lis display: table-cell werden sie automatisch gleich hoch und nebeneinander positioniert. Das ist fast so einfach wie bei der Flexbox-Variante, aber problematisch wird es mit dem Abstand zwischen den Spalten. Da sich die lis jetzt wie Zellen einer Tabelle verhalten, kann man ihnen nicht einfach margin geben.

li {  
    display: table-cell;
}

Um Abstand zwischen den "Pseudo-Zellen" zu erreichen, gibt man der ul die Eigenschaften border-collapse: separate; und border-spacing: 10px 0;.

Hinweis: border-spacing nimmt maximal zwei Werte an. Der erste definiert den horizontalen und der zweite den vertikalen Abstand. Gibt man nur einen Wert an, gilt dieser für alle Seiten.

Durch border-spacing bekommen die lis nun links UND rechts Abstand. Mein Workaround dazu sieht so aus, dass man der ul links und rechts negativen Margin in der Höhe des border-spacing vergibt.

ul {
    list-style:none;
    padding: 0;
    border-collapse: separate;
    border-spacing: 10px 0;
    margin: 0 -10px;
}

Ein live-Beispiel findest du in diesem Codepen.

Ihr könnt also zwischen zwei Techniken wählen, wobei die zweite in dem meisten Fällen noch am ehesten in Fragen kommt. Wenn man aber in den Genuss kommt an einem Projekt zu arbeiten bei dem IE9 keine Rolle spielt, sollte man auf jeden Fall Flexbox verwenden.

Manuel Matuzovic

Frontend Developer aus Wien.

2 Kommentare zu “Gleich hohe Spalten mit CSS

    1. Jein ;) In diesem Fall wollte ich nicht versuchen eine komplette Tabelle nachzustellen, sondern nur die Tabellenzellen. Deswegen hätte es mir nichts gebracht der ul display: table zu geben und nachdem es auch ohne funktioniert hat (auch in IE 8), habe ich es weggelassen.

      Anders wärs, wenn ich versuchen wollte die einzelnen Zellen auf die gesamte Breite des Elternelements zu verteilen, ohne den Zellen eine fixe Breite zu geben. Man sieht in diesem Beispiel, dass die Elemente in .table2 nur so breit sind wie ihr Inhalt, weil .table2 nicht `display: table` hat.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *