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.
.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.
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.
<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.
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.
Pastry liquorice topping sweet cheesecake powder sugar plum jelly beans. Candy chupa chups biscuit.
Bear claw cookie chupa chups carrot cake cheesecake cupcake soufflé lemon drops. Apple pie liquorice bonbon carrot cake wafer.
Biscuit icing caramels wafer gummies lemon drops chupa chups. Lemon drops sesame snaps marzipan.
Oh bitte, einmal Pommes Frites mit Majo!
Cheesecake dragée cupcake jelly-o bear claw sugar plum jelly jujubes fruitcake.
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%; }
}
<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.
Lobesam die Melonen milensis troppo verro. Ingelis itali logo knuprig.
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.
Ameli con butto analogem: Nee bloß nicht. Turkisi pasto klickklcik hilft bunit bravi menti.
.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.
