Aloha ;)

Ich hab ein absolut positionierten <div> der eine gewisse größe hat.
In diesem möchte ich untereinander mehrere <div class="eintrag"> container anordnen
! welche eine variable größe nach ihrem Inhalt haben da man in diesem ein oder mehrere <div> container per java  ein und ausklappen kann.

Problem ist jetzt das der nächste <div class="eintrag"> sich nicht automatisch nach unten verschiebt.

(Kurz nebenbei werden auch z.b. trennlinien <hr> nicht zwischen den <div class="eintrag"> angezeigt sondern hinter diesen in einer andern z ebene, was ich mir auch nicht erklären kann)

Bis jetzt hab ich jegliche kombinationen von position: und float: ausprobiert die mir eingefallen ist aber nie mit dem gewünschtem Ergebnis. Aber ich hoffe einfach mal weiterhin das sich das auch ohne js lösen lässt.

Ich warne: Es kann gut sein, dass sich dein Problem durch CSS nicht lösen lässt. Die Schwächen von CSS sind ohne Zweifel die Verallgemeinerung und die Anwendung auf variablen Inhalt. Dafür braucht es schon Dinge wie SASS, also entsprechende Präprozessor-Funktionalitäten. Oder eben JavaScript. Wenn du darauf nicht ausweichen kannst oder willst, kann ich dir noch einen letzten Versuch mit auf den Weg geben.

Versuche, die Höhe der <div class="eintrag"> auf "auto" zu stellen, damit der Browser die Wahl der Darstellung hat. Dann stellst du sicher, dass alle position:static; besitzen - denn sobald auch nur eins der Elemente aus dem Elementfluss entfernt wird hast du so oder so verloren. Dann stellst du bei allen Elementen margin:0px; ein. Mit viel Glück funktioniert das dann.

Kein Gewehr auf meine Angaben - ich habe nicht extra nachgelesen, ob das Verhalten von margin tatsächlich so ausgelegt ist. Ich bin kein Freund des Nachschlagens in Specs ;) Einfach mal testen, und ansonsten Techniken wie Javascript einsetzen. Damit die Barrierefreiheit erhalten bleibt, solltest du dann ein Fallback dafür haben, falls jemand mit deaktiviertem Javascript deine Seite besucht. Zum Beispiel, indem du die absolute <div> standardmäßig mit einem overflow:auto; versiehst.

Vielleicht gibts auch noch mit CSS3 Möglichkeiten, die ich mangels Erfahrung mit CSS3 nicht direkt im Kopf habe. Ich fürchte aber nicht.

Grüße,

RIDER