div mit Positions-angabe fallen aus übergeordneten Tag raus

  • Hallo Leute,

    ich habe in meinem Projekt 4 divs erstellt:

    HTML
    <div class="seitenbereich">
    <div style='position:relative;'>
                <div id='Ausgabe0' style='position:absolute; top:0;'>Text, der jetzt sichtbar ist, blablabla
                </div>
                <div id='Ausgabe1' style='display:none; position:absolute; top:0;'>Text, der am Anfang unsichtbar ist</div>
            </div>
    </div>

    Da fehlt jetzt nach dem div mit dem Class="Seitenbereich" Text, der noch angezeigt wird.
    Seitenbereich habe ich so definiert:

    .seitenbereich {
    width: 820px;
    text-align: center;
    background-color: white;
    border-width: 1px;
    border-color: #000000;
    border-style: solid;
    padding: 5px;
    }

    Wie ihr sehen könnt, soll die ganze Seite von einem Rahmen umgeben werden.
    Leider stehen aber die divs mit den Positionsangaben außerhalb des Rahmens. Habe im Netz leider nichts dazu gefunden.

    Wäre sehr dankbar für Tipps...

    Viele Grüße

  • Hallo

    Zitat

    Leider stehen aber die divs mit den Positionsangaben außerhalb des Rahmens.

    Das liegt wahrscheinlich am "position: absolute;". Dadurch werden die div aus dem Textfluss und damit den umgebenden div herausgenommen.

    Gruss

    MrMurphy

  • Für alle die es interessiert:
    Habs jetzt selbst gelöst. Ich wollte überlagernde Divs haben, damit ich einen Überblendeffekt erzeugen kann.
    Ich habe jetzt die position:absolute aus dem sichtbaren div entfernt. So kommt der Rahmen drumherum. Am Ende der Überblendung habe ich die Attribute ausgestauscht (also jetzt sichtbar position:static und unsichtbar position:absolute). Es gab noch ein paar Probleme wenn die Höhe des einen divs höher war als das andere, da habe ich auch noch ein wenig getrixt mit Javascript, aber ich will euch nicht lagweilen...