Abstand zweier Divs zueinander

[Ingo G.]

Hallo zusammen.

Ich bastel gerade an einer kleinen Seite, in der ich 2 dhtml-Ebenen (ich hoffe die Bezeichnung ist korrekt; ich bin noch nicht ganz so fit) mit Hilfe von GoLive CS 2 und eigenen Korrektureingriffen in den Quelltext übereinander anordne.

Die Ebenen sollen dann mit Text etc. dynamisch per php gefüllt werden und sich folglich mit ihrer Größe anpassen, was kein Problem ist. Das Problem ist aber, dass die untere Ebene natürlich weiter nach unten verschoben werden muss, wenn sich die obere Ebene aufgrund von vermehrtem Text weiter nach unten ausdehnt, da sie sich sonst überschneiden. Der Abstand der beiden Ebenen soll dabei gleich bleiben. Ich hab mal eine kleine Beispielseite zur Verdeutlichung gebastelt: http://www.brettspielseite.de/problembeschreibung

Ich hab jetzt schon einige Zeit versucht, eine Lösung für das Problem zu finden, war aber nicht erfolgreich. Es wäre toll, wenn jemand von Euch ein paar Tipps für mich hätte.

Viele Grüße,
Ingo

[Kalle_B]

Hallo,

du verwendest unsinnerweise position:absolute. Dadurch verliert das Element die Relation zu den anderen Elementen und orientiert sich am Elternelement, falls das auch ein position:absolute hat ODER body heisst.

Schmeiss diesen Eintrag raus.

Gruß, Kalle.

[Ingo G.]

Hallo,

du verwendest unsinnerweise position:absolute. Dadurch verliert das Element die Relation zu den anderen Elementen und orientiert sich am Elternelement, falls das auch ein position:absolute hat ODER body heisst.

Schmeiss diesen Eintrag raus.

Gruß, Kalle.

Hallo Kalle,

vielen Dank erstmal für den Tip. Ich hab das ganze jetzt mal ausprobiert und musste feststellen, dass nur der Internet Explorer die Seite jetzt richtig interpretiert. Firefox und Opera schaffen das nicht. Hab das Beispiel um die veränderte Version ergänzt http://www.brettspielseite.de/problembeschreibung/ohne_absolut.html

Folgende Probleme treten noch auf:
1. Der Internet Explorer interpretiert margin-top: 100px nicht. Ist aber kein allzu großes Problem, da er margin-bottom: 50px richtig interpretiert und ich sowieso eine eigene css für den Internet Explorer schreibe.
2. Opera und Firefox zeichnen die Kästen (also den jeweiligen Rahmen) in der gleichen Größe, egal wieviel Text ich nun reinschreibe. Er expandiert also nicht mehr mit dem Text. Der Text wird aber darüber hinaus geschrieben, so dass der Text vom oberen Kasten in den unteren "überläuft".

Hast Du dafür einen Lösungsvorschlag?

Viele Grüße,
Ingo

[Ingo G.]

Hallo,

du verwendest unsinnerweise position:absolute. Dadurch verliert das Element die Relation zu den anderen Elementen und orientiert sich am Elternelement, falls das auch ein position:absolute hat ODER body heisst.

Schmeiss diesen Eintrag raus.

Gruß, Kalle.

Hallo Kalle,

vielen Dank erstmal für den Tip. Ich hab das ganze jetzt mal ausprobiert und musste feststellen, dass nur der Internet Explorer die Seite jetzt richtig interpretiert. Firefox und Opera schaffen das nicht. Hab das Beispiel um die veränderte Version ergänzt http://www.brettspielseite.de/problembeschreibung/ohne_absolut.html

Folgende Probleme treten noch auf:

1. Der Internet Explorer interpretiert margin-top: 100px nicht. Ist aber kein allzu großes Problem, da er margin-bottom: 50px richtig interpretiert und ich sowieso eine eigene css für den Internet Explorer schreibe.
2. Opera und Firefox zeichnen die Kästen (also den jeweiligen Rahmen) in der gleichen Größe, egal wieviel Text ich nun reinschreibe. Er expandiert also nicht mehr mit dem Text. Der Text wird aber darüber hinaus geschrieben, so dass der Text vom oberen Kasten in den unteren "überläuft".

Hast Du dafür einen Lösungsvorschlag?

Viele Grüße,
Ingo

Für alle, die das Thema auch interessiert:
Hab das Problem gelöst. Die Lösung von Kalle war korrekt. Ich hatte nur vergessen, den Wert "height" auf "auto" zu setzen. Jetzt funktionierts wie gewollt.

Nochmal vielen Dank Kalle.

Grüße,
Ingo