Türchen #6: overflow:hidden

von

Guten Morgen und einen wohlgesinnten Nikolaus!

Türchen #6 Und, hattet ihr was leckeres in euren selbstverständlich geputzten Schuhen? Wenn nicht, gibts hier wieder etwas, was eure Laune eventuell anheben kann. Hinter Türchen Nummer sechs haben wir heute overflow:hidden, das viele im Zusammenhang mit Verstecken von Inhalt bzw. Scrollbalken kennen werden. Es gibt aber noch einen anderen Anwendungsfall…

Browserunterstützung

Browser Firefox Safari Opera Chrome Internet Explorer
ab Version 1.0 1.1 4.0 1.0 4.0

Die Eigenschaft overflow wird von allen Browsern beherrscht, im IE6 gibts allerdings ein kleines Problem, wenn der Wert visible gesetzt ist. Demnach vergrößert er das Element, damit der Inhalt hinein passt. Dadurch verhalten sich height/width wie min-height/min-width. Uns interessiert aber nur ganz speziell der Fall von overflow:hidden und da gibts keine Probleme.

Normalerweise setzt man diese Eigenschaft ja dazu ein, um überstehenden Text auszublenden oder um zu verhindern, dass Scrollbalken erscheinen. Ein schöner Nebeneffekt ist aber, dass Elemente mit overflow:hidden ihren gefloateten Inhalt “clearen”.

Beispiele

Am besten wir schauen uns das mal an einem Beispiel an. Folgender Aufbau: Ein Container hat eine nach links floatende Box als Inhalt. Dadurch fällt der Container in sich zusammen und alle nachrückenden Inhalte rücken nach oben.

HTML
1
2
3
4
<div class="container">
	<div class="box">Box</div>
	Container
</div>
CSS
1
2
3
4
5
6
.box {
	float:left;
	height:100px;
	margin-right:10px;
	width:100px;
}
Ergebnis
Box

Container

Seht ihr was ich meine? Das sieht doof aus und oftmals will man das gar nicht.

Um das zu vermeiden, kann man jetzt dem nachrückenden Inhalt z. B. ein clear:both geben. Das löst zwar das Problem mit dem Text neben der Box, aber nicht die Höhe unseres Containers. Jetzt kommt aber overflow:hidden ins Spiel, das wir dem Container verpassen müssen:

CSS
1
2
3
.container {
	overflow:hidden;
}
Ergebnis
Box

Container

Siehe da, alles bestens, die floatende Box wird wieder komplett vom Container umschlossen. Dabei brauchen wir nicht einmal zusätzliches Markup wie beispielsweise ein Clear-Div.

Short and simple, schönen Tag noch und bis morgen. ;)

Die hier könnten dich auch interessieren…

6 Kommentare RSS

Hans Christian Reinl

Meiner Meinung nach ist overflow: hidden; der schönere Hack im Vergleich zum Clear-Hack, aus dem einfachen Grund, dass er einfach viel schneller ist.

Die Problematik, die Fabian anspricht ist sicherlich ein Problem. Im “Real-Coding” ist mir der CSS3-Fall allerdings noch nicht untergekommen. Es wird sich zeigen, wie man in Zukunft agieren wird.

Norman

Hi Sven, hallo Fabian,
klar gibts andere Methoden zum clearen aber nur, weil box-shadow abgeschnitten wird, heißt das ja nicht gleich, dass overflow:hidden nicht mehr benutzt werden kann.. kommt eben drauf an, was man gerade hat und machen will. :)
Vielen Dank aber für eure informativen Links, passen gut zum Thema!

Fabian Tempel

Ich habe ja nicht gesagt dass man deshalb overflow zum clearen gar nicht mehr nutzen sollte. Es sollte nur beachtet werden, und verdient an dieser Stelle für alle Leser erwähnt zu werden.

Denn auch CSS-Transforms etc. fallen dem overflow-clearing zum Opfer.

alfred

bei mir taucht der overflow-hidden beim google street view auf und ein teil del bildes wird nicht angezeigt. Wenn ich bei “element untersuchen” das overflow ändere wird das bild dann zwar korrekt angezeigt, aber beim näcstem start von street view ist wieder alles beim alten. also wie kann ich das dauerhaft ändern?
kann mir jemand helfen?
danke
alfred

Kommentieren