Positionieren mit float oder display:inline-block?

CSS float ist der Favorit des responsive Designs: float bietet Besuchern mit großen Monitoren ein Vier-Spalten-Layout, das auf kleineren Monitoren automatisch zum Zwei-Spalten-Layout mutiert und auf dem Handy alles der Reihe nach auflistet.

float nimmt HTML-Blöcke aus dem Fluss des Dokuments. Eine Reihe von zusätzlichen CSS-Regeln (die alles andere als intuitiv sind) muss sich darum kümmern, dass nach einem Block mit float der normale Fluss des Dokuments wieder aufgenommen wird.

display:inline-block ist eine Alternative zum Positionieren mit float. Der umfassende Container wächst mit, so dass Tricks und Hacks wie ein clearfix außen vor bleiben.

Boxen mit display: inline-block liegen wie Text unten auf einer Grundlinie. Unterschiedlich hohe Boxen führen darum zu einem dynamischen Auf- und Ab. Das einfach Mittel gegen das Auf und Ab der Boxen ist vertical-align: top – das hängt die Boxen an die obere Grundlinie.

Kein Layout-Werkzeug ohne Tücken

Beim Positionieren von Boxen mit display:inline-block zählen die Leerzeichen zwischen den Blöcken. Also muss entweder das vollständige Markup in eine Zeile geschrieben werden oder ein zweifelhafter Comment Hack herhalten.

<div id="cbox">
    <div class="cbox">
        <div></div>
        <h5>BOX 1</h5>
        <p>Als es klingelte, …</p>
    </div><div class="cbox">
        …
    </div><div class="cbox">
        …
    </div>
</div>

<div id="cbox">
    <div class="cbox">
        <div></div>
        <h5>BOX 1</h5>
        <p>Als es klingelte, …</p>
    </div><!--
    --><div class="cbox">
        …
    </div><!--
    --><div class="cbox">
        …
    </div>
</div>

Ein Plus gegenüber float hat das Positionieren mit display:inline-block:

#cbox { text-align: center}

zentriert die Boxen in ihrem umfassenden Block – das wirkt adrett, wenn der umfassende Block in einem responsiven Design schmaler wird.

Genauso wie beim Positionieren mit float rutschen die Boxen automatisch untereinander.

Blöcke mit inline-block wachsen – genauso wie bei Boxen mit float – nicht automatisch synchron auf dieselbe Höhe. Immerhin spannen sie den umfassenden Block stets zuverlässig auf.

#cbox {
    text-align: center
}
#cbox {
    margin: 20px auto
}
.cbox {
    display: inline-block;
    width:90%; min-width: 160px; max-width: 190px;
    border:1px solid silver;box-sizing: border-box;
    margin: 10px
}
.cbox h5, .cbox p {
    text-align: left
}
@media only screen and (min-width:460px){
    .cbox { width:30%; }
    .cbox { vertical-align: top; }
}
@media only screen and (min-width:680px){
    .cbox:last-child { margin: 10px 0 10px 10px}
    .cbox:first-child { margin: 10px 10px 10px 0}
}

Auch display: inline-block ist kein Allheilmittel in einem modernen Grid-Layout für ein responsives Layout, sondern eine Alternative zu float. Weder float noch display:inline-block waren als Layout-Werkzeuge geplant.

display: flex oder display: grid als genereller Ansatz

display: flex und display:grid sind die Nachfolger des strapazierten float. flex und grid berechnen die Abstände zwischen den Boxen automatisch und bringen alle Boxen einer Reihe oder Zeile synchron auf eine Höhe. Eine Flexbox bringt die Elemente in Zeilen oder Spalten unter.

Grid ist ein Raster aus Zeilen und Spalten – ähnlich wie eine Tabelle. In einem Grid-Raster setzt CSS Elemente in eine beliebige Position, ohne dass die Reihenfolge der Inhalte dafür aufbereitet werden muss.

display:flex wird von allen Browsern (auch IE11) unterstützt, aber auf display: grid müssen wir noch warten oder Sonderlocken für IE11 drehen, denn IE11 unterstützt CSS Grid, aber nutzt eine ältere Syntax und hat einige Funktionen des modernen Grids noch nicht an Bord.