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
Great!
Faux-columns usw. hat bei mir nämlich aufgrund der Hintergrundbeschaffenheit nämlich nicht funktioniert.
THX
Smartsoul
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.
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!
Bei mir funktionierts irgentwie nicht.
Meine Seite basiert auf einem 3-Spalten-Layout mit header und footer.
Wo muss dann das overlow: hidden hin?
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>
Es funktioniert! Super!
Vielen vielen dank!
Du bist echt der beste! =)
Vielen, vielen Dank, hat super funktioniert. Ich liebe Logik!!! :)
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;
}
Nachtrag:
z-index:1 ist überflüssig.
Für maximale Browserkompatibilität:
www.positioniseverything.net/articles/onetruelayout/print
Hi,
wollt auch mal meinen Dank ausdrücken. So einfach und so große Wirkung. Also danke für die Info.
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?
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.
kann es sein, dass dann die Ankerfunktionalität nicht mehr funktioniert? be mir schneidet es dann alles oberhalb ab...
Greeze Jo
VIELEN DANK! Das ist echt genial! ! ! !
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! :-)
das ist aber leider auch nur eine speziallösung, denn so funktionieren anker nicht mehr.
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.
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!
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 ! ;)
Vielen vielen Dank!!! Mehr braucht man nicht zu sagen :-)
Diese Lösung ist selten dämlich...
Eine normale Clearfix Lösung ist hilfreicher.
@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.
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.
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.
@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.
Danke, das ist die perfekte Lösung. Manchmal kann's so einfach sein.
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?