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
18
#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;
    height: 100%; /*für IE6*/
}
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.

Nachtrag: Der IE6 interpretiert overflow:hidden scheinbar anders, oder gar nicht. Indem man dem #main einfach eine height von 100% zuweist kann man diesen Fehler aber leicht umgehen.
Erstellt von EaStErDoM am 15.06.2008 um 20:39:33.
Zuletzt bearbeitet von EaStErDoM gestern um 10:39:57.

Schlagworte

(X)HTML, CSS, Div-Layout

Kommentare

Smartsoul, am 06.08.2008 um 17:22:11
Great!

Faux-columns usw. hat bei mir nämlich aufgrund der Hintergrundbeschaffenheit nämlich nicht funktioniert.

THX

Smartsoul
EaStErDoM, gestern um 10:34:48
Bitteschön, sowas hört man gerne.

Übrigens, hab ich erst kürzlich herausgefunden: damits im IE6 auch funzt dem overflow:hidden div einfach ein height:100% geben.

Neues Kommentar