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. CSS float hat viele Jahre lang das Spaltenraster im Layout bestimmt, wenn auch unter der Last vielfältiger Wrapper-Elemente im HTML. Heute haben wir display: flex und display: grid ohne lästiges Beiwerk.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Responsives Webdesign mit CSS float

Die Positionierung von HTML-Blöcken mit CSS float ist intuitiv und genial einfach für ein Design mit zwei oder drei Spalten. Aber float hat schwarze Löcher: Das dunkle Abgrund heißt »Spalten gleicher Höhe«. 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.

Mit den älteren Versionen von CSS waren Spalten gleicher Höhe ein Kampf gegen Windmühlen, aber CSS3 hat bessere Techniken mitgebracht und die Umsetzung erleichtert.

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>

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 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%; }
}

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. Schon IE 10 unterstützte flex, 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>

Spalten gleicher Höhe mit Zellen auf gleicher Höhe

Cards, die Darstellung von drei oder vier Kästchen für Angebote, wünscht sich das alten Tabellenlayout des vorletzten Jahrzehnts zurück. Aber auch da hat display:flex Lösungen bei der Hand.

Die Lösung für drei Spalten mit je drei Zeilen ist raffiniert: Auf kleinen Monitoren sitzen die Cards untereinander, etwas mehr Platz, dann sitzen zwei Spalten nebeneinander und die letzten Spalte wird so breit wie diese zwei. Erst mit ausreichend Platz sitzen drei Spalten nebeneinander.

flexbox Column 1
Occelli Buttero

Lobesam die Melonen milensis troppo verro. Ingelis itali logo knuprig.

Lausch mettis
flexbox Column 2
Hibiskus Mundi

Anipasto grosso Mundo helbig hochizont labislis. Genug Hibiskus anti osso verdo lotesam sum nobility. Grosse Geschnack licki orangi buttoni assenten veggie. Salizg Erde krummo mit die kruste.

Lausch mettis
flexbox Column 2
Di Photografie Congalis

Ameli con butto analogem: Nee bloß nicht. Turkisi pasto klickklcik hilft bunit bravi menti.

Lausch mettis
.column {
	padding-bottom: 20px;
	color: #424346;
	background: #FFF;
	box-shadow: 0 1px 6px rgba(0,0,0,.1);
}
.column .columnhead,
.column p {
	margin: 0;
	padding: 0 20px;
}
.column .columnhead {
	font-size:1.8rem;
	margin: .75rem 0 .5rem;
	color: hsl(40,100%,40%);
}
.column p {
	margin-bottom: 20px;
	text-align: left;
	font-size: 0.9em;
}
.btn {
	margin-left: 20px;
	padding: 0.5rem 1rem 0.5rem;
	font-size: .9em;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-decoration: none;
	color: #fff;
	border-radius: 3px;
	background: hsl(40,90%,50%);
}

.flex-columns .column img {
	width: 100%;
	height: auto;
}
.flex-columns {
	display: flex;
	justify-content: center;
	width: 860px;
	max-width: 100%;
	margin: auto;
}
.flex-columns .column {
	display: flex;
	flex-direction: column;
	flex: 1 1 300px;
	margin: 1em 0.5em;
}
.flex-columns .column .btn {
	align-self: flex-start;
	margin-top: auto;
}

@media (max-width: 900px) {
	.flex-columns {
		flex-wrap: wrap;
	}
}

Die wichtigsten Eigenschaften sind flex-direction: column für die drei Elemente jeder Spalte, align-self: flex-start für die letzte Spalten unten (der orange Button).

CSS subgrid

Eine einfache Lösung für Zeilen gleicher Höhe in allen Spalten ist auf dem Weg: grid-template-rows: subgrid.