Abstand unten bleibt beim Überlappen mit negativem Margin

[Ralf]

Hallo,

ich habe ein Problem mit dem Überlappen zweier Div-Container mittels negativem Margin. Das Enprodukt soll so aussehen, dass der #head-container Flash beinhaltet und ein Teil des #content - Containers darüberlappt (mittels negativem Margin oben). Das funktioniert soweit ganz gut, nur bleibt die Seite offensichtlich genauso lang, als hätte ich den #content gar nicht nach oben gezogen (zu erkennen am Scrollbalken den man noch dem Offset entsprechend weiterbewegen kann). Die Seite soll aber am Ende des #content - Containers abschließen. Was kann ich tun damit der überflüssige Scrollbereich verschwindet?

Hier mein Testcase.

Danke vorab und viele Grüße
Ralf

[ChrisB]

Hi,

ich habe ein Problem mit dem Überlappen zweier Div-Container mittels negativem Margin.

Du hast das Problem, das du nicht weisst, was du tust.

Das funktioniert soweit ganz gut, nur bleibt die Seite offensichtlich genauso lang, als hätte ich den #content gar nicht nach oben gezogen (zu erkennen am Scrollbalken den man noch dem Offset entsprechend weiterbewegen kann).

Natürlich ist das so, weil du gar kein negatives margin verwendet hast, sondern relative Positionierung:

#content {  
   width: 930px;  
   height: 500px;  
   margin: 0 auto;  
   padding: 15px;  
   background: red;  
   position: relative;  
   top: -300px;  
} 

Und für die ist genau dieses Verhalten explizit definiert.

MfG ChrisB

[Eliara_]

hei,

und wenn du es so machst:

#content{
margin:-300px auto 0;
top:0;
}

LG

[apsel]

Om nah hoo pez nyeetz, Ralf!

Da du offensichtlich, wie ChrisB schrieb, ein Position-Verständnisproblem hast, empfehle ich dir mein Tutorial.

Matthias