Positionierung

[Osiris]

Hallo.

Ich arbeite gerade an einem Projekt, bei dem es nötig ist, zwei gleich große <div> übereinaner zu platzieren.

Klar, das geht mit einer Angabe zu
    position:absolute;
    top:0;
    left:0;
und z-index:1;.

Zuerst baue ich einen <div> als Container. Dieser soll bestimmt werden von der Größe des <div>s mit Inhalt. Schematisch sieht das dann so aus:

<div id="container">
    <div id="Inhalt">blubb</div>
    <div id="darüber legen">bla</div>
</div>
Als Breite gebe ich für #Inhalt
width: 100%; an.
#Inhalt erhält nun beliebigen Inhalt (dynamisch, via php). Er ändert dabei natürlich seine Höhe.
Der zweite, leere <div> soll sich ebenso groß darüber legen:
position: absolute;
z-index:2;
top:0;
left:0;
Für die Größe gebe ich width:100%; height: 100%; an, und hoffe, dass er sich an der GRöße seines Elternelements misst.

Tja, tut er aber nicht.
Wie bring ich "darüber legen" dazu, gierig zu sein und allen verfügbaren Platz einzunehmen?

mfg, Marc

[Osiris]

Nachtrag: Ich weiß selbst, das das eine <div>-Suppe ist. Sagt mir also nicht, was ich schon weiß!

Außer ihr wisst, wie man das ohne divs umgehen kann!

[Matze]

Hallo,

Als Breite gebe ich für #Inhalt
width: 100%; an.

du weißt aber das Div-Kontainer automatisch die maximal verfügbare Breite annehmen? Deine Angaben sind also überflüssig. top und left solltest du auch weg lassen können.

Grüße, Matze

[Osiris]

du weißt aber das Div-Kontainer automatisch die maximal verfügbare Breite annehmen? Deine Angaben sind also überflüssig. top und left solltest du auch weg lassen können.

Aha. Danke. Also funktioniert das mit der Breite genau umgekehrt wie mit der Höhe, oder? In die Breite sind <div> gierig, in der Höhe passen sie sich dem (nicht vorhandenen) content an ... und selbst 100% als relative Angabe bringen nichts...
Aber danke.
Das mit top und left hätte ich zu demozwecken weglassen können, ok. In meinem Projekt werden dort aber andere Werte stehen und diese Angaben benötigt.

mfg,
Marc

[Matze]

Hallo,

Aha. Danke. Also funktioniert das mit der Breite genau umgekehrt wie mit der Höhe, oder? In die Breite sind <div> gierig, in der Höhe passen sie sich dem (nicht vorhandenen) content an ... und selbst 100% als relative Angabe bringen nichts...

Nein, nicht ganz. Bei absoluter Positionierung ist die Breitenangabe erforderlich.
Du hattest also 'rechter' als ich ;)

Grüße, Matze

[Osiris]

So, ich habe das jetzt geregelt bekommen:

<style>
   #container {width:500px; overflow: hidden; position:absolute;}
   #Inhalt    {width: 100%; position: relative; z-index:1; top: 0; left: 0; border: 1px solid black;}
   #Hintergrund{width:10000px; height:10000px; position:absolute; z-index:0; top: 0; left: 0;}
</style>

<div id="container">
    <div id="Inhalt">blubb</div>
    <div id="Hintergrund">blubb</div>
</div>

So weit, so gut, für alle, die was ähnliches suchen.
Aber nun taucht ein neues problem auf, speziell für den Opera Browser Version 9.23:
Ich habe, wie ihr gesehen habt, um den Inhalt eine Border hinzugefügt. Diese wird (nur im Opera) am rechten Rand abgeschnitten. Grund dafür ist das overflow:hidden. Wenn ich overflow:scroll; benutze, kann ich nach minimalem Scrollen auch die rechte Border sehen.
Woran liegt das?
Rendert Opera die Border außerhalb des Elements (wird der Inhalt dabei 100% des containers, also 500px + 2 mal die Border=502px breit)?
Wie bekomme ich die Border trotz allem angezeigt?

mfg, Marc

[Struppi]

Aber nun taucht ein neues problem auf, speziell für den Opera Browser Version 9.23:
Ich habe, wie ihr gesehen habt, um den Inhalt eine Border hinzugefügt. Diese wird (nur im Opera) am rechten Rand abgeschnitten.

Bei mir auch im FF 2 und im IE 6, kann es sein das deine Seite im Quirksmode dargestellt wird?
Wenn du die Breite wegläßt wird Rahmen vollständig angezeigt.

Rendert Opera die Border außerhalb des Elements (wird der Inhalt dabei 100% des containers, also 500px + 2 mal die Border=502px breit)?

Das ist das Boxmodell, da der IE im Quirksmode dieses falsch berechnet auch meine obige Vermutung.

Struppi.

[Osiris]

Wenn du die Breite wegläßt wird Rahmen vollständig angezeigt.

Wunderbar. Genauso ist es. Vielen Dank für deine Hilfe!
mfg,
Marc