Mehrspaltiges CSS Layout mit gleich hohen Spalten

Seit meinem Vortrag bei den T3DD07 erreichten mich zahlreiche Mails, ob ich den Code noch einmal veröffentlichen könne.

Hier nun die Lösung, um mittels CSS ein mehrspaltiges Layout mit physisch gleich hohen Spalten zu erzeugen.


XHTML

<div id="contentWrap">
    <div id="wrap">
        <div id="left"></div>
        <div id="middle"></div>
        <div id="right"></div>
    </div>
</div>


CSS

#contentWrap {
    display: table;
}
#wrap {
    display: table-row;
}
#left,
#middle,
#right {
    display: table-cell;
    vertical-align: top;
}
*+html #wrap {
	overflow: hidden;
}
* html #left,
* html #middle,
* html #right {
	margin-bottom: -10000px;
	padding-bottom: 10000px;
	float: left;
}
*+html #left,
*+html #middle,
*+html #right {
	margin-bottom: -10000px;
	padding-bottom: 10000px;
	float: left;
}