CSS Positionieren: Spalten gleicher Höhe

CSS positionieren: Spalten gleicher Höhe

CSS-Layout ist pures Schubladendenken: ein Block für die Navigation, einer für die Inhalte, einer für die Fussleiste, einer für die obere Leiste. Die Positionierung von HTML-Blöcken mit CSS float ist intuitiv und genial einfach für ein Design mit zwei oder drei Spalten.

Aber wenn die Spalten ihre eigene Hintergrundfarbe aufweisen, kommt eine Hürde ins Spiel: Beim Positionieren mit float wird jede Spalte im Layout nur so hoch wie ihr Inhalt. Ohne Tricks gibt float keine Spalten in gleicher Höhe her.

float hat den Zenit einer langen Karriere überschritten, ist aber unbestritten immer noch auf der sicheren Seite und stabil in allen Browsern verankert.

float hat schwarze Löcher: Das schwärzeste ist Spalten gleicher Höhe. Blöcke mit float werden immer nur so hoch wie ihr Inhalt. Mit den älteren Versionen von CSS waren Spalten gleicher Höhe ein kleiner Kampf gegen Windmühlen, aber CSS 3 hat zusätzliche Mittel mitgebracht und die Umsetzung erleichtert.

Spalten gleicher Höhe mit display:table-cell

Erst mal float beiseite: Eine einfache Lösung für drei Spalten ohne float beruht auf display : table und display : table-cell.

cup3 cup2 cup1

Jelly-o pie dragée apple pie soufflé chocolate bar. Jujubes unerdwear.com jelly beans apple pie dragée liquorice. Oat cake toffee ice cream.

Tootsie roll bear claw chocolate bar cotton candy pudding sesame snaps sugar plum cheesecake dragée.

HTML
<div class="container">
   <div class="col">…   </div>

   <div class="col">…   </div>

   <div class="col">…   </div>
</div>

Bei display : table und display : table-cell müssen wir daran denken, dass die Zellenblöcke die angeborenen Eigenschaften ablegen und die Eigenschaften von Tabellenzellen annehmen. Tabellenzellen werden durch border-spacing für das table-Element auf Abstand voneinander gehalten und nicht durch margin.

responsive ist mit display: table und table-cell ist gegenüber echten Tabllen kein Problem: display: table und table-cell wirken erst bei einer Wunschbreite (z.B. @media (min-width: 500px) {}).

CSS
.col:nth-child(1) { background: pink; }
.col:nth-child(2) { background: lavender; }
.col:nth-child(3) { background: ivory; }
img {width: 100%; height: auto; }

@media (min-width: 500px) {
   .container {
      display: table;
      border-spacing: 16px;
      width: 100%;
   }
   .col {
      display: table-cell;
      box-sizing: border-box; 
      cell-spacing: 8px;
      padding: 0.5em;
      vertical-align: top
   }

   .col:nth-child(1) { width: 20%; }
   .col:nth-child(2) { width: 40%; }
   .col:nth-child(3) { width: 40%; }
}

Drei Spalten mit CSS float

Liegen die Spalten wie in diesem Beispiel in einem Block (.wrap), hat .wrap keine Höhe, da die drei Blöcke unterhalb von .wrap mit CSS float positioniert sind. Darum wird die Hintergrundfarbe des umfassenden Blocks .wrap in diesem Beispiel nicht sichtbar.

Jelly-o pie dragée apple pie soufflé chocolate bar. Jujubes unerdwear.com jelly beans apple pie dragée liquorice. Oat cake toffee ice cream.
Toffee topping bear claw tootsie roll bear claw gummies pudding jelly.
Tootsie roll bear claw chocolate bar cotton candy pudding sesame snaps sugar plum cheesecake dragée.
HTML und CSS
.wrap { background: slateblue; }
.spalte-1 { float: left; width: 33%; background: pink; }
.spalte-2 { float: left; width: 33%; background: lavender; }
.spalte-3 { float: left; width: 33%; background: wheat; }
…
<div class="wrap">
    <div class="spalte-1"> … </div>
    <div class="spalte-2"> … </div>
    <div class="spalte-3"> … </div>
</div>

float mit Pseudo-Hintergrund

Nur wenn der umfassende Block .wrap selber ebenfalls mit float positioniert ist, wird er so hoch wie sein Inhalt. Dieses Merkmal von float verhilft zusammen mit einem Hintergrund für den umfassenden Block zu drei Spalten gleicher Höhe.

Jelly-o pie dragée apple pie soufflé chocolate bar. Jujubes unerdwear.com jelly beans apple pie dragée liquorice. Oat cake toffee ice cream.
Toffee topping bear claw tootsie roll bear claw gummies pudding jelly.
Tootsie roll bear claw chocolate bar cotton candy pudding sesame snaps sugar plum cheesecake dragée.

Nicht die drei Spalten halten die Hintergrundfarbe, sondern der umfassende Block.

CSS
.wrap { 
    float: left;
    background-image: 
        linear-gradient( 
           to right, 
           pink 0%, pink 33%, 
           lavender 33%, lavender 66%, 
           beige 66%, beige 100%);
}
.wrap:after { 
    content:" "; display: table; margin-bottom: 2em;
}

Am einfachsten und zudem flexibel zeigt ein Verlauf – linear Gradient – drei Farben. Am Ende sorgt der wohlbekannte Clearfix dafür, dass alles, was nach den drei Spalten kommt, wieder zurück an den rechten Rand rutscht.

Wenn der Block mit den drei Spalten zentriert werden soll, kommt eine weitere Schwäche der Positionierung mit float ins Spiel. Blöcke mit float lassen sich nicht zentrieren. Dann muss ein Block rund um .wrap für die Zentrierung sorgen.

Diese Lösung ist nicht zu kompliziert, läßt sich auch ein Jahr später wieder entziffern und funktioniert auch in alten Browsern ohne Widerspruch.

display : flex – Spalten gleicher Höhe

Die Flexbox ist die moderne Variante für den Spaltensatz, mit display:flex werden Spalten immer gleich hoch und passen sich besonders gut an ihren umfassenden Block an. Da können wir mit minimalem HTML und CSS auf kleinen Monitoren die Inhalte sequentiell abspulen, auf mittelgroßen Monitoren zwei Spalten in drei Reihen einsetzen und auf großen Monitoren drei Spalten in zwei Reihen setzen.

cup3

Pastry liquorice topping sweet cheesecake powder sugar plum jelly beans. Candy chupa chups biscuit.

cup2

Bear claw cookie chupa chups carrot cake cheesecake cupcake soufflé lemon drops. Apple pie liquorice bonbon carrot cake wafer.

cup1

Biscuit icing caramels wafer gummies lemon drops chupa chups. Lemon drops sesame snaps marzipan.

cup3

Oh bitte, einmal Pommes Frites mit Majo!

cup2

Cheesecake dragée cupcake jelly-o bear claw sugar plum jelly jujubes fruitcake.

cup1

Bonbon dessert jelly-o jelly.

Gegenüber display : grid ist die Flexbox gut in älteren Versionen von Internet Explorer aufgestellt. IE 10 unterstützt flex bereits, wenn auch mit -ms-Präfix.

Flexbox CSS
.flexbox { … }
@media (min-width: 480px) {
   .flexbox { max-width: 430px; display: flex; flex-wrap: wrap }
   .fb { width: 49%; }
}
@media (min-width: 640px) {
   .flexbox { max-width: 580px;  }
   .fb { width: 32%; }
}
Flexbox HTML
<div class="flexbox">
   <div class="fb"><img src="cup1.jpg"></div>
   <div class="fb"><img src="cup2.jpg"></div>
   <div class="fb"><img src="cup3.jpg"></div>
   <div class="fb"><img src="cup4.jpg"></div>
   <div class="fb"><img src="cup5.jpg"></div>
   <div class="fb"><img src="cup6.jpg"></div>
</div>