DIV Container wächst nicht mit seinem Inhalt

[Anton]

Hi,

ich habe mir folgendermaßen zwei Bilder in einen DIV Cotainer gepackt:

<span style="position:relative; left:50%; margin-left:-120px">
    <img src="1.jpg" width="100" height="100">
</span>

<span style="position:relative; left:50%; margin-left: 20px; top:50px">
    <img src="2.jpg" width="100" height="100">
</span>

Der rechte Abstand des ersten Bildes ist 20 Pixel von der Mitte des DIV-Containers entfernt.

Der linke Abstand des zweiten Bildes ist 20 Pixel von der Mitte des DIV-Containers entfernt.

Des weiteren wird das zweite Bild mit Hilfe von "top:50px" um 50 Pixel weiter unten als das erste Bild dargestellt.

Mein Problem ist nun folgendes:

Das zweite Bild ragt über den DIV-Container, in dem es sich befindet, nach unten heraus in den nächsten DIV-Container. Eigentlich sollte sich der DIV-Container immer so anpassen, dass er alle Elemente umschließt. In diesem Fall also die Bilder. Das Problem ist, dass der DIV-Container die Elemente nicht umschließt, denn sonnst würde das zweite Bild ja nicht nach unten aus diesem herausragen.

Könnt ihr mir sagen, woran das liegen könnte?

[Gunnar Bittersmann]

@@Anton:

Könnt ihr mir sagen, woran das liegen könnte?

An der relativen Positionierung. [CSS2 §9.3.1]

Live long and prosper,
Gunnar

[ChrisB]

Hi,

Das zweite Bild ragt über den DIV-Container, in dem es sich befindet, nach unten heraus in den nächsten DIV-Container.

Works as designed.

Könnt ihr mir sagen, woran das liegen könnte?

Daran, dass du das Bild (bzw. den umgebenden, vermutlich ueberfluessigen span) relativ positioniert hast. Relative Positionierung verschiebt ein Element gegenueber seiner normalen Position im Elementfluss, und belaesst dessen urspruenglichen Platzbedarf reserviert.

MfG ChrisB

[Anton]

Du schreibst:

"...und belaesst dessen urspruenglichen Platzbedarf reserviert."

Was kann ich denn tun, damit der gesamte Platzbedarf (sowohl der ursprüngliche als auch der neue) reserviert werden bzw. was wäre denn die typische Lösung um zu erreichen, dass das Element vom DIV-Container umflossen wird?

[ChrisB]

Hi,

Was kann ich denn tun, damit der gesamte Platzbedarf (sowohl der ursprüngliche als auch der neue) reserviert werden bzw. was wäre denn die typische Lösung um zu erreichen, dass das Element vom DIV-Container umflossen wird?

Du koennest es bspw. per margin "verschieben", anstatt per relativer Positionierung. (Aber mit collapsing margins aufpassen, oder ggf. padding verwenden.)

MfG ChrisB