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:

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

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

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

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ösung 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:

#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%; /* for IE6 */
}

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.

Kommentare

Smartsoul am Mittwoch, 6. August 2008 um 17:22

Great!

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

THX

Smartsoul

Markus René Einicher
Markus René Einicher am Sonntag, 7. September 2008 um 10:34

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.

Günter am Mittwoch, 25. Februar 2009 um 23:57

Super, so einfach habe ich das noch nie erklärt gesehen! Hat mir sehr weitergeholfen. Besonders der Tipp zu IE6 war Gold wert.
Vielen Dank!

CSS-n00b am Dienstag, 28. April 2009 um 16:22

Bei mir funktionierts irgentwie nicht.
Meine Seite basiert auf einem 3-Spalten-Layout mit header und footer.
Wo muss dann das overlow: hidden hin?

Markus René Einicher
Markus René Einicher am Mittwoch, 29. April 2009 um 07:55

in etwa so:
<div id="header"></div>
<div style="overflow:hidden">
<div id="col1"></div>
<div id="col2"></div>
<div id="col3"></div>
</div>
<div id="footer"></div>

CSS-n00b am Mittwoch, 29. April 2009 um 13:22

Es funktioniert! Super!
Vielen vielen dank!
Du bist echt der beste! =)

Nedim Sabic am Donnerstag, 17. September 2009 um 17:42

Vielen, vielen Dank, hat super funktioniert. Ich liebe Logik!!! :)

Roger P. am Dienstag, 17. November 2009 um 10:02

Will man den Mantel sowohl um Header als auch Footer fliessen lassen, wird der Footer im Firefox überdeckt.
Einfache Lösung: Man setze position:relative und z-index:1;

#fusszeile {
background-color: darkgreen;
border-top: 1px solid #000080;
padding: 0px;
width: 100%;
clear:both;

position:relative;
}

Roger P. am Dienstag, 17. November 2009 um 10:03

Nachtrag:
z-index:1 ist überflüssig.

Roger P. am Mittwoch, 18. November 2009 um 21:35

Für maximale Browserkompatibilität:

www.positioniseverything.net/articles/onetruelayout/print

Sevage am Freitag, 12. Februar 2010 um 10:51

Hi,
wollt auch mal meinen Dank ausdrücken. So einfach und so große Wirkung. Also danke für die Info.

Flo am Sonntag, 7. März 2010 um 18:46

Ein einfacher, aber wirkungsvoller Trick. Hat bei mir ohne Probleme funktioniert.
Gibt es auch noch eine ähnlich einfache Lösung, damit die Seite mindestens 100% des Browserfensters groß ist?

Flo am Sonntag, 7. März 2010 um 20:24

Habs doch noch hinbekommen. Dazu einfach in html, body und sämtliche wrapper die Höhe 100% eintragen und die Seite wird so hoch wie gewünscht.

Jo L. am Samstag, 13. März 2010 um 13:06

kann es sein, dass dann die Ankerfunktionalität nicht mehr funktioniert? be mir schneidet es dann alles oberhalb ab...
Greeze Jo

Markus
Markus am Donnerstag, 15. Juli 2010 um 00:09

VIELEN DANK! Das ist echt genial! ! ! !

Boris
Boris am Donnerstag, 30. September 2010 um 12:41

Hallo,

erstmal vielen Dank, die Anleitung war echt eine große Hilfe :-)

Hast jemand vielleicht noch einen Tipp, wie ich das auch im Opera hin bekomme? Die Seite wird im Opera leider auf der gesamten Größe von 32K Pixeln dargestellt und hat so natürlich auch entsprechend lange Scrollbars...

Danke im Voraus! :-)

thomas
thomas am Freitag, 7. Januar 2011 um 17:57

das ist aber leider auch nur eine speziallösung, denn so funktionieren anker nicht mehr.

Yann
Yann am Dienstag, 8. Februar 2011 um 10:10

Hi!

Zwanzig Daumen hoch für diesen Tipp - der ist echt Gold wert. Das wäre einen Flattr wert.

Dann eben hier meinen ergebensten Dank!

Viele Grüße,
Yann.

Basti
Basti am Donnerstag, 17. März 2011 um 14:48

Dazu fällt mir nur eins ein: ALTER!
Spitze. Wollte aber noch anmerken, dass man damit jeden footer prima ans Ende bekommt ohne footerstickalt und wie das alles heißt! Weiß nicht ob das schon bekannt war, deshalb wollt ich das noch loswerden!
Danke!

Nicklas
Nicklas am Dienstag, 27. März 2012 um 09:57

Danke für den super Tipp! Hab mich echt lange Gedanken gemacht und mit deinem Tipp konnte ich das Problem in weniger als 5 minuten beseitigen !! Danke ! ;)

Patrick
Patrick am Sonntag, 8. April 2012 um 20:02

Vielen vielen Dank!!! Mehr braucht man nicht zu sagen :-)

Anon
Anon am Dienstag, 22. Mai 2012 um 23:09

Diese Lösung ist selten dämlich...

Eine normale Clearfix Lösung ist hilfreicher.

Markus René Einicher
Markus René Einicher am Mittwoch, 23. Mai 2012 um 13:41

@Anon: Ich glaub du hast eine andere Problemstellung. Mit dem Clearfix verhinderst du das nachfolgende Elemente nach einem float nachrutschen, bzw. erzwingst du damit, dass ein Elternelement das floatende Elemente enthält sich an deren Höhe anpasst. Das hilft dir bei der Problemstellung dieses Tutorials gar nicht. Hier geht es darum, dass du zwei floatende divs nebeneinander hast, die gleich hoch werden sollen, aber deren Inhalt nicht die gleiche Höhe hat und denen man keine fixe Höhe zuordnen möchte.

Anon
Anon am Freitag, 25. Mai 2012 um 22:23

Dann nenne mir einen Anwendungsfall wo diese Lösung gut für sein soll und wo sich die Problemstellung nicht mit einem Clearfix lösen lässt?

Des weiteren hat die Lösung, bei der das Umschließende Element ein overflow: hidden besitzt ein Problem mit u.A. box-shadow, da dieser knallhart abgeschnitten wird.

Markus René Einicher
Markus René Einicher am Samstag, 26. Mai 2012 um 03:55

Die Anwendung ist im Tutorial klar beschrieben, auch die Problemstellung. Was verstehst du nicht?

Und nein, ich muss dir keine Anwendungs-Beispiele nennen, das hier ist kein Troll-Forum und auch keine Selbsthilfegruppe.

Fabian
Fabian am Dienstag, 2. Oktober 2012 um 16:48

@Markus: Vielen Dank für dein Beispiel! Leider hatte ich mit dem IE etwas Probleme bei der Umsetzung. Ich habe das ganze jetzt mit JQuery gelöst. Damit gab es keine Probleme auf dem IE.

Reinhard
Reinhard am Samstag, 10. November 2012 um 22:18

Danke, das ist die perfekte Lösung. Manchmal kann's so einfach sein.

Lizzy
Lizzy am Freitag, 7. Dezember 2012 um 22:03

Hi,
ich find die Lösung auch super und hab sie auch schon mehrfach eingesetzt, aber nun habe ich festgestellt, dass bei Ankern das Layout zerschossen wird. Hast du vielleicht eine Idee, woran das genau liegen kann?