CSS-Trickkiste: Container identischer Höhe erzeugen

Immer auf der (gleichen) Höhe sein...

Werbung
Diese komplizierte Aufgabe wird mit CSS zum Kinderspiel - und das sogar absolut standard-konform.
Diese komplizierte Aufgabe wird mit CSS zum Kinderspiel - und das sogar absolut standard-konform.
☆ Dieser Artikel liegt in unserer CSS-Trickkiste – reingucken lohnt sich… ☆

Auch wenn es natürlich schon lange nicht mehr zeitgemäß ist, einen Vorteil hatte das Formatieren von Webseiten mit Tabellen auf jeden Fall: Die Spalten einer Zeile waren stets gleich hoch.

Deshalb treibt es so manchen Webentwickler schier in den Wahnsinn, wenn er das erste Mal vor der vermeintlichen Herkules-Aufgabe steht, Inhalte unterschiedlicher Länge gleichförmig anzuordnen:



Wer es gerne „quick&dirty“ mag, hat jetzt natürlich drei Möglichkeiten:

  • Die Höhe der „div“-Boxen auf einen festen Wert setzen,
  • fehlende Leerzeilen mit <br /> auffüllen oder
  • es hinzunehmen und sich selbst einzureden, es sei eine „technisch bedingte Limitierung“.

So oder so heißt es: Adjeu responsives Webdesign. Denn entweder verhunzen unterschiedliche Bildschirmgrößen das mühsam gebastelte Layout oder ein unerwarteter Textumbruch bereitet ihm den Garaus.

Aber für genau diesen Zweck gibt es eine simple Lösung mit CSS ! 🙂

Tabellenähnliche Container mit CSS

Der Trick besteht darin, so zu tun, als handele es sich bei den für die Inhalte verwendeten „div“-Boxen um Tabellen. Klingt komisch, funktioniert aber ganz hervorragend.

Für die Realisierung benötigen Sie eine umschließende „div“-Box, welche alle späteren Spalten umfasst (in alter Terminologie Tabelle genannt). Die einzelnen Spalten stellen ebenfalls „div“-Boxen dar (vergleichbar mit den Spalten oder Zellen einer Tabelle).

Und jetzt kommt die in unserer Trickkiste versteckte CSS-Eigenschaft „display“ zum Einsatz:

  • Bei der umschließenden „div“-Box setzen wir die Eigenschaft „display“ auf den Wert „table“,
  • und die darin befindlichen „div“-Boxen erhalten den Wert „table-cell“.

Ein Beispiel zur Verdeutlichung:

CSS für den Header der Webseite…

<style>
.ofa_tableContainer {
    display: table; /* div-Box verhält sich wie eine Tabelle. */
    width: 100%; }

.ofa_tableContainerSpalten {
    display: table-cell; /* div-Box verhält sich wie die Spalte einer Tabelle. */
    padding: 5px; }
</style>

HTML-Code zur Erzeugung des Inhalts…

<div class="ofa_tableContainer">
    <div class="ofa_tableContainerSpalten" style="background-color: #525D6B20;">
        <strong>Spalte 1 der "CSS-Tabelle"</strong><br />
        <p>Hier steht was.</p>
        <p>Hier steht was.</p>
        <p>Hier steht was.</p>
        <p>Und da auch.</p>
    </div>
    <div class="ofa_tableContainerSpalten" style="background-color: #525D6B30;">
        <strong>Spalte 2 der "CSS-Tabelle"</strong><br />
        <p>Hier steht wenig.</p>
    </div>
    <div class="ofa_tableContainerSpalten" style="background-color: #525D6B40;">
        <strong>Spalte 3 der "CSS-Tabelle"</strong><br />
        <p>Hier steht viel.</p>
        <p>Hier steht viel.</p>
        <p>Hier steht viel.</p>
        <p>Hier steht viel.</p>
        <p>Hier steht viel.</p>
        <p>Hier steht viel.</p>
        <p>Hier steht viel mehr.</p>
    </div>
</div>

So sieht es dann aus:

Spalte 1 der „CSS-Tabelle“

Hier steht was.

Hier steht was.

Hier steht was.

Und da auch.

Spalte 2 der „CSS-Tabelle“

Hier steht wenig.

Spalte 3 der „CSS-Tabelle“

Hier steht viel.

Hier steht viel.

Hier steht viel.

Hier steht viel.

Hier steht viel.

Hier steht viel.

Hier steht viel mehr.

Und so funktioniert es:

Die Klassen „ofa_tableContainer“ bzw. „ofa_tableContainerSpalten“ definieren die Eigenschaften zum einen für die umschließende „div“-Box und zum anderen für die Spalten-Boxen. Jeweils mithilfe der eingangs bereits beschriebenen CSS-Eigenschaft „display“ und ihren Werten „table“ bzw. „table-cell“.

Schon haben wir mit einer einzigen Zeile CSS Erstaunliches geschafft: „div“-Boxen, die sich wie Tabellen verhalten und eine standard-konforme Grundlage für responsive Webdesigns liefern.


Stand der Informationen: November 2018
Wichtig: Bitte beachten Sie die Nutzungsbedingungen und rechtlichen Hinweise für diesen Beitrag !

Werbung