Div an Float-Höhe anpassen
Häufig wird die CSS-Eigenschaft float benutzt, um mehrere <div> innerhalb einer Eltern-<div> nebeneinander anzuordnen. <div> sind Block-Level-Elemente, erzwingen also eigentlich einen Zeilenumbruch. Durch float: left; lässt sich dies verhindern, mehrere <div> lassen sich so horizontal anordnen. Adiós <table>!
So weit alles kalter Kaffee.
Liegen diese fließenden <div> innerhalb einer Container-<div>, ergibt sich aber folgendes Problem: float bewirkt, dass die <div> in der Höhe über die Eltern-<div> (den Container) nach unten herausragen (laut CSS-Spezifikationen auch so vorgesehen…). In anderen Worten: Der Container “kennt” die Höhe seiner Kinder-<div> nicht mehr und erhält als Höhe null, anstatt sich der Höhe seiner Kinder anzupassen und diese zu umschliessen (siehe Beispiel 1 und folgendes Code-Beispiel).
#child1 {
float:left;
width: 250px;
height: 400px;
}
#child2 {
float:left;
width: 350px;
height: 250px;
}
Hallo, ich bin der container.Ich heiße child1!Und ich bin child2!
Die lässt sich einfach durch den altbekannten Trick lösen, unterhalb der fließenden <div>eine Weitere einzufügen, der clear: both; zugewiesen wird. Damit wird der Container gezwungen, seine untere Grenze hinter diesen Paragraphen zu verschieben, er erkennt jetzt scheinbar die Höhe der Kinder-<div> an (siehe Beispiel 2).
Hallo, ich bin der container.Ich heiße child1!Und ich bin child2!
So weit, so gut. Nur wird dadurch nicht nur ein überflüssiges Element in den Quellcode eingefügt, dieses Element besitzt zudem auch noch keinerlei semantische Bedeutung, es dient lediglich dazu, den Browser auszutricksen.
Dabei lässt sich der gewünschte Effekt auch ohne zusätzliches Markup erreichen, es reicht eine zusätzliche Zeile CSS. Dem Container muss bloß overflow: hidden; zugewiesen werden, so einfach.
Toll. Funktioniert mal wieder nicht in IE6 und darunter. Der alte Knacker rechnet intern mit einem Model names hasLayout, ein Zustand, der bei vielen HTML-Elementen im IE6 durch das Setzen bestimmter CSS-Eigenschaften hervorgerufen wird. Erst wenn ein Element “Layout hat” (hasLayout = true), kann es eine eigene Höhe haben.
Hier liegt der Knackpunkt. Um IE6 dazu zu bewegen, der Container-<div> ebenfalls eine Höhe größer als Null zu spendieren, reicht overflow nicht. Die Rettung bringt hier entweder die Zuweisung einer festen width (also alles außer auto), oder, falls dies aus Designgründen nicht möglich sein sollte, der Einsatz von Microsofts proprietärem CSS-Attribut zoom: 1;.
Für einen umfassenden Hack, der ältere Internet Explorer einschließt, siehe auch diesen Artikel auf positioniseverything.net.)
Will man den Container auch noch dazu bringen, sich der Breite seiner Kinder anzupassen, anstatt auf volle 100% zu gehen, fügt man noch ein display:table; ein (funktioniert mal wieder nicht in IE). Siehe hierzu Beispiel 3 und Beispiel 4!
Der Vollständige CSS-Code:
#container {
overflow: hidden;
display: table;
}
#child1 {
float:left;
width: 250px;
height: 400px;
}
#child2 {
float:left;
width: 350px;
height: 250px;
}
Leave a Reply
Genau das habe ich gesucht. Vielen Dank :)
Tom
21:26, März 12th, 2007
Wieso nicht mit
:after ?
Dann sparst die den p Tag.
lg
Tim
15:49, Juni 15th, 2007
Verstehe nicht ganz, was damit gemeint ist. Der p-Tag ist da, um semantisch korrektes Markup zu erhalten, da der div-Tag keinerlei semantische Bedeutung hat.
p kennzeichnet hier lediglich einen Absatz und ist auch für das Funktionieren des hier Erklärten nicht weiter nötig.
Christoph Schüßler
16:07, Juni 15th, 2007
Danke danke danke!!!
Häng da schin seit Tagen fest, jetzt Endlich die Lösung!!! :):)
Site gleich in die Lesezeichen aufgenommen!
.: jass :.
22:53, Juli 5th, 2007
Super tutorial!
Schöne Sprache, sehr gute Optik… wie setze ich denn jetzt aber unter diese Reihe von divs noch eine Reihe hin?
me
19:42, Juli 7th, 2007
Danke für die Blumen ;-)
Zu deiner Frage: Vielleicht erklärt dieses Beispiel am besten, wie man eine zweite Reihen von DIVs hinzufügt: http://dev.herr-schuessler.de/examples/div-an-float-hoehe-anpassen/float_in_div4.html – einfach mal in de Quelltext schauen.
Christoph Schüßler
16:08, Juli 8th, 2007
Hallo,
der Artikel ist toll und kommt schnell auf den Punkt. Alles super erklärt! Weiter so
just me ;)
21:46, Februar 15th, 2009
Interesante Artikel. Ich habe eine Frage. Wie kann man die größe von kinder divs dynamish halten, d.h wenn ein kind in die Höhe geht dann das andere Kind auch dynamish an diese Höhe anpasst.
Developer
07:12, März 5th, 2009
auf das overflow: hidden; musste erstmal kommen!!! vielen dank fuer diesen artikel!!
greez,
basti
Basti
15:28, März 7th, 2009
Sehr fein, funktioniert gut, was mir gefehlt hatte damit es funktioniert war das display:table; sonst hat das overflow:hidden; einfach das innere Abgeschnitten und es wurden nicht alle Inhalte angezeigt. Mit der Kombination wie im Quellcode funktioniert es wunderbar! Vielen Dank!
Skalli
22:40, Juni 23rd, 2009
Wenn ich das Problem richtig verstanden habe, geht es um das einklappen der Divs durch den Hauptcontainer. Hier meine Lösung:
CSS:
=============================
#MUTTI {
position: absolute;
}
.child1 {
position: relative;
width: 100px;
height: 100px;
float: left;
}
.child2 {
position: relative;
width: 100px;
height: 100px;
float: left;
}
in das MUTTI-Div noch irgendwo in der HTML-Datei:
einfügen.
Müsste so auch klappen. Ist zwar billig, aber kennt auch der IE 6. lg.: Dieter Chiemsee
Dieter Chiemsee
10:52, August 28th, 2009
@Dieter: Richtig – dann haste aber ein erzwungenes Leerzeichen im Layout, was gar nich vorgesehen ist.
@Christoph: Danke für den Tipp. Die Kombi mit display:table kannte ich auch noch nicht.
Danke
MJ
15:19, September 25th, 2009
…Oder ganz einfach dem eltern- ein “display:inline-block” spendieren
honkytonky
19:03, Dezember 11th, 2009
Super Anleitung, genau danach habe ich gesucht! Vielen herzlichen Dank.
Phips
17:19, Februar 18th, 2010
Jo, ist übersichtlich und gut erklärt.
Danke und weiter so!
Gruß
Pix
Pix
08:38, März 27th, 2010
Juhu, endlich hab ich dieses Problem mit deiner Hilfe gelöst! Spitze. Hiermit sei dir herzlichst gedankt :)))
ruetty
16:16, Mai 25th, 2010