floating <img> in <div> überragt den Rand

[Gunnar Bittersmann]

Hello out there!

Das funktioniert wunderbar, solange genug Text da steht, so dass der Text länger ist, als das Bild.

Da nirgens eine Angabe für die 'height'-Eigenschaft der 'div'-Elemente gemacht ist, gilt der Defaultwert 'auto'.

Steht jedoch wenig Text neben einem hohen Bild, überragt das Bild den <div> Bereich. […] Wenn also jemand besser weiß, warum das <img> Objekt nicht ein Teil IM <div> Bereich ist, […]

Die CSS-Spezifikation weiß es im Abschnitt 10.6.3  Blockebene, nicht ersetzte Elemente im normalen Fluss, und Floating, nicht ersetzte Elemente: „Nur untergeordnete Elemente im normalen Fluss werden [bei der Berechnung der Höhe] berücksichtigt (das heißt, Floating-Boxen und absolut positionierte Boxen werden ignoriert […])“

Ebenso falls jemand weiß, wie ich den <div> Bereich entsprechend vergrößern kann, dass er sich an übergroße Bilder anpasst.

Du willst für jedes 'div'-Element also die Mindesthöhe ('min-height'-Eigenschaft) auf den Wert der Höhe des jeweiligen Bildes setzen (plus eventueller Rand).

Da IEs < 7 diese Eigenschaft nicht kennen, dafür aber fehlerhafterweise die 'height'-Eigenschaft so interpretieren, ist für IEs diese so anzuwenden – vor richtigen[tm] Browsern versteckt durch conditional comments oder star html hack.

See ya up the road,
Gunnar