Gleich hohe Spalten mit CSS

Mehrspaltige Layouts sind mit der CSS-Eigenschaft display:table recht einfach, ohne Layouttabellen, umzusetzen. Der Haken daran ist, dass der Internet Explorer bis Version 7 diese Eigenschaft nicht kennt. Hier muss Javascript die Aufgabe übernehmen.

Grundlegender Code

Quelltext

<div style="display:table">
    <div style="display:table-cell; background: #ccf; width: 150px">
    Spalte 1
    </div>
    <div style="display:table-cell; background: #eee; width: 400px">
    Spalte 2<br />mit weiterem Inhalt
    </div>
    <div style="display:table-cell; background: #ccf; width: 150px">
    Spalte 3
    </div>
</div>

Vorschau

Spalte 1

Spalte 2
mit weiterem Inhalt

Spalte 3

Ergänzung mit CSS und Javascript für den Internet Explorer

Mit dem Javascript wird die Höhe des umschließenden DIV-Containers ermittelt. Die DIV-Container werden mit IDs ergänzt, um sie mit CSS und Javascript ansprechen zu können. Ich gehe erstmal davon aus, dass der Internet Explorer 8 display:table unterstützen wird.

Quelltext im Dokumentenkopf (Javascript und CSS)

<!--[if lt IE 8]>
<style type="text/css">
#a1, #a2, #a3 {
float: left;
}
</style>

<script type="text/javascript">
function layout_colheight()
{
    var h = document.getElementById("a").scrollHeight;
    document.getElementById("a1").style.height = h+'px';
    document.getElementById("a2").style.height = h+'px';
    document.getElementById("a3").style.height = h+'px';
}

window.onload = layout_colheight;
</script>
<![endif]-->

Quelltext

<div id="a" style="display:table">
    <div id="a1" style="display:table-cell; background: #ccf; width: 150px">
    Spalte 1
    </div>
    <div id="a2" style="display:table-cell; background: #eee; width: 400px">
    Spalte 2<br />mit weiterem Inhalt
    </div>
    <div id="a3" style="display:table-cell; background: #ccf; width: 150px">
    Spalte 3
    </div>
</div>

Spalte 1

Spalte 2
mit weiterem Inhalt

Spalte 3