Pascal Kremp

QuickTipp: Zwei Divs auf die gleiche Höhe bringen mit table-row und table-cell

1 minute

Vor einigen Tagen wurde ich gefragt, wie man zwei nebeneinanderliegende HTML-Elemente auf gleiche Höhe bringt.

Googelt man nach diesem Vorhaben, findet man zahlreiche Möglichkeiten. Mein Favorit: Wir gaukeln beispielsweise DIV-Containern vor, dass diese Tabellenelemente sind.

Dazu benötigst du display:table-row; und display:table-cell;.

[code]<div class=“row“>
<div class=“col one“>
<h1>Pascal rockt!!!!111elf</h1>
</div>
<div class=“col two“>
<h1><a href=“http://twitter.com/pascalkremp“>Deswegen sollte ich ihm auf Twitter folgen!</a></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, minima, voluptatibus eaque explicabo error sapiente dicta molestiae reprehenderit fuga harum. Eveniet sapiente corporis magnam suscipit odit? Repellat blanditiis sint vel.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, minima, voluptatibus eaque explicabo error sapiente dicta molestiae reprehenderit fuga harum. Eveniet sapiente corporis magnam suscipit odit? Repellat blanditiis sint vel.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, minima, voluptatibus eaque explicabo error sapiente dicta molestiae reprehenderit fuga harum. Eveniet sapiente corporis magnam suscipit odit? Repellat blanditiis sint vel.</p>
</div>
</div>[/code]

[code].row {
display: table-row;
}

.col {
display: table-cell;
}

.one {
background:rgba(0,0,0, 0.1);
width: 50%;
}
.two {
background:rgba(0,0,0, 0.2);
width: 50%;
}[/code]

Demo auf JSFiddle

Einziger Nachteil an dieser Lösung ist, dass mal wieder der IE6 und IE7 nicht mitspielen wollen. Meine Meinung nach verdienen die Browser eh keine Aufmerksamkeit mehr!

Hat dir die Lösung geholfen? Funktioniert etwas nicht? Oder präferierst du einen anderen Weg? Nutze die Kommentarfunktion.


4 Kommentare

  • Theresa

    Hi Pascal,

    ich versuche gerade von Dreamweaver (Entwurfsansicht!) wegzukommen.. Deine Hilfestellung, zwei Divs mit row und table cell auf eine Höhe zu bringen, hat super funktioniert!

    Jetzt habe ich noch folgendes Problem, ich habe alle Ebenen in einem Container (margin: auto;) und möchte diese Ebenen in dem Container mit Abstand nebeneinander und untereinander, eingerückt oder nicht eingerückt, zeigen.

    Wie könnte ich das elegant bewerkstelligen? Falls du mir einen Tipp geben könntest wäre das super!

    Theresa

  • dirk

    Einfach – effizient – super!!!
    Danke!!!

  • Sunny Marx

    Pascal rockt!!!!111elf

    Deswegen sollte ich ihm auf Twitter folgen!
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, minima, voluptatibus eaque explicabo error sapiente dicta molestiae reprehenderit fuga harum. Eveniet sapiente corporis magnam suscipit odit? Repellat blanditiis sint vel.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, minima, voluptatibus eaque explicabo error sapiente dicta molestiae reprehenderit fuga harum. Eveniet sapiente corporis magnam suscipit odit? Repellat blanditiis sint vel.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, minima, voluptatibus eaque explicabo error sapiente dicta molestiae reprehenderit fuga harum. Eveniet sapiente corporis magnam suscipit odit? Repellat blanditiis sint vel.

    Gute alte Technik, die funktioniert. :o)

  • ADD A COMMENT