Christoph Schüßler

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;
}