Floatende Divs gleich hoch machen

Author: Markus René Einicher Veröffentlicht: on Saturday 10. October 2009 at 18:28 Updated: on Saturday 10. October 2009 at 18:28 Categories: HTML, CSS Tags: Comments: 22 - Post a Comment Trackbacks: 0 - Trackback URL

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.

Smartsoul on Wednesday 6. August 2008 at 17:22

Great!

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

THX

Smartsoul

Markus René Einicher on Sunday 7. September 2008 at 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 on Wednesday 25. February 2009 at 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!

Günter on Thursday 26. February 2009 at 00:29

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 on Tuesday 28. April 2009 at 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 on Wednesday 29. April 2009 at 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 on Wednesday 29. April 2009 at 13:22

Es funktioniert! Super!

Vielen vielen dank!

Du bist echt der beste! =)

Peter Linke on Tuesday 5. May 2009 at 19:10

Bei mir funktioniert es nicht. Das overflow:hidden schneidet mir auch den content ab sobald es etwas zum scrollen gibt. Mit einem zus

Peter Linke on Tuesday 5. May 2009 at 19:27

Bei mir funktioniert es nicht. Das overflow:hidden schneidet mir auch den content ab sobald es etwas zum scrollen gibt. Mit einem zus

Peter Linke on Tuesday 5. May 2009 at 19:31

Sorry f

Peter Linke on Wednesday 6. May 2009 at 06:56

OK, habe es hinbekommen, im Wrapper darf keine H

Nedim Sabic on Thursday 17. September 2009 at 17:42

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

Roger P. on Tuesday 17. November 2009 at 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. on Tuesday 17. November 2009 at 10:03

Nachtrag:

z-index:1 ist überflüssig.

Roger P. on Wednesday 18. November 2009 at 21:35

Für maximale Browserkompatibilität:

http://www.positioniseverything.net/articles/onetruelayout/print

Roger P. on Wednesday 18. November 2009 at 23:12

Für maximale Browserkompatibilität:

http://www.positioniseverything.net/articles/onetruelayout/print

Sevage on Friday 12. February 2010 at 10:51

Hi,

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

Flo on Sunday 7. March 2010 at 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 on Sunday 7. March 2010 at 20:22

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 on Sunday 7. March 2010 at 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. on Saturday 13. March 2010 at 13:06

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

Greeze Jo

Markus on Thursday 15. July 2010 at 00:09

VIELEN DANK! Das ist echt genial! ! ! !