WebstyleZ.Net

Floatende Divs gleich hoch machen

Mit Tabellenlayouts war es recht einfach zwei Spalten gleich hoch werden zu lassen, mitunter sehr problematisch wird das aber bei einem modernen DIV-Layout.

Auf die alte Art, haben unsere zwei Spalten gar keine andere Wahl als gleich hoch zu werden, sie sind über das Tabellengerüst aneinander gekettet:

1
2
3
4
5
6

<table>
 <tr>
  <td> ... Ganz viel Text ... </td>
  <td> .. Wengier Text ..</td>
 </tr>
</table>

Quelltext: HTML

Im modernen Box-Layout, sind Tabellen aber tabu, vor Allem wenn es um das Setzen des Layouts, also nicht tabellarischem Inhalt geht:

1
2
3
4

<div id="main">
 <div id="content"> ... Ganz viel Text ... </div>
 <div id="sideBar"> .. Weniger Text .. </div>
</div>

Quelltext: HTML

Die Spalte #sidebar würde hier aufhören, sobald ihr Inhalt zu Ende ist, im Vergleich mit der wesentlich längeren Text-Spalte wäre das mittendrin. Damit man sie jetzt dazukriegt gleich zu werden wie ihre benachbarte Spalte, würde man von der Logik her einfach auf height: 100% zurückgreifen. Das funktioniert in diesem Zusammenhang aber nicht.

Die Löung findet sich im Netz unter dem Namen "Equal Height Columns" und ist vom Prinzip her recht simpel: Man lässt die Spalten extrem lang werden, länger als der Inhalt je sein wird und setzt die beiden in eine Elternbox und sagt dieser sie soll dass, was überfließt verstecken:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

#sidebar {
    padding-bottom: 32768px;
    margin-bottom: -32768px;
    float: right;
    width: 250px;
}
 
#content {
    padding-bottom: 32768px;
    margin-bottom: -32768px;
    float: left;
    width: 520px;
}
 
#main {
    overflow: hidden
}

Quelltext: css

Der Riesige Innenabstand dehnt die Spalte jetzt ewig weit nach unten, der negative Außenabstand macht jetzt, dass die Spalte regulär jetzt doch wieder da endet wo sie es ohne den padding getan hätte. Übrig bleibt ein optischer Überhang, der einfach vom Eltern-Element mit overflow: hidden versteckt wird.