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;
}
Genau das habe ich gesucht. Vielen Dank :)
Wieso nicht mit
:after ?
Dann sparst die den p Tag.
lg
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.
Danke danke danke!!!
Häng da schin seit Tagen fest, jetzt Endlich die Lösung!!! :):)
Site gleich in die Lesezeichen aufgenommen!
Super tutorial!
Schöne Sprache, sehr gute Optik… wie setze ich denn jetzt aber unter diese Reihe von divs noch eine Reihe hin?
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.
Hallo,
der Artikel ist toll und kommt schnell auf den Punkt. Alles super erklärt! Weiter so
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.
auf das overflow: hidden; musste erstmal kommen!!! vielen dank fuer diesen artikel!!
greez,
basti
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!
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: 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
…Oder ganz einfach dem eltern- ein “display:inline-block” spendieren
Super Anleitung, genau danach habe ich gesucht! Vielen herzlichen Dank.
Jo, ist übersichtlich und gut erklärt.
Danke und weiter so!
Gruß
Pix
Juhu, endlich hab ich dieses Problem mit deiner Hilfe gelöst! Spitze. Hiermit sei dir herzlichst gedankt :)))
Habe im Firebug etwas experementiert und im Grunde war die display: table; Zeile im Elternelement die einzig notwendige.
Ihr habt mir den Tag gerettet!! Vielen Dank :)
Ich wäre fast verzweifelt… Vielen Dank für diese Hilfreiche Aufklärung!
Sehr schön!
Vielen Dank für das!
Da muss man erstmal drauf kommen :D
Vielen Dank, hat mir sehr weiter geholfen!~
Hast schön erklärt vorallem das mit den Beispielen ;) Hier könnten weitere derartige Beiträge gepostet werden. Der eine oder andere freut sich bestimmt darüber.
Okay, dieser Ansatz ist durchaus interessant. Vielen Dank dafür.