XHTMLforum - css layout problem mit 3 zentrierten div´s

XHTMLforum (http://xhtmlforum.de/index.php)

- CSS (http://xhtmlforum.de/forumdisplay.php?f=73)

- - css layout problem mit 3 zentrierten div´s (http://xhtmlforum.de/showthread.php?t=36564)

css layout problem mit 3 zentrierten div´s

ich hab in meiner seite 3 divs verwendet.
- das äußerste zum zentrieren des contents in der mitte (dunkler rand) (760px)
- da drin nen weisses div (740px)
- da wiederrum drin der eigentliche content (720px)

Code:

<div id="middleGrau">

<div id="middleWeiss">

<div id="content">

   <table>

         [MEIN CONTENT]

   </table>

</div>

</div>

</div>

das css:

Code:

// zentriert mittig, dunkel grauer rahmen

#middleGrau {

        position: absolute;

        visibility: visible;

        width: 760px;

        left: 50%;

        margin-left: -380px;

        background-image:url(/templates/images/bg_schatten.gif);

        height: 100%;

        min-height: 750px;

        z-index:10;

        border:1px solid #ff0000;

}



// zentrierte weisse fläche auf dem dunkel grauen div

#middleWeiss {

        position: absolute;

        visibility: visible;

        left: 10px;

        width: 740px;

        background-color:#ffffff;

        height: 100%;

        min-height: 750px;

        z-index:20;

}



// eig. content, auch zentriert auf den beiden anderen divs

#content {

        position: absolute;

        visibility: visible;

        left: 10px;

        width: 720px;

        height: 100%;

        z-index:30;

}

Sieht so aus:
http://img354.imageshack.us/img354/7821/19uo1.gif

Mein Problem ist, dass wenn ich einige sehr lange Seiten habe, dann werden die beiden äußeren Container nicht der Länge des Content-Containers angepasst, also der Content läuft über die beiden "Rahmen-Container" hinaus.

Siehe hier:
http://img354.imageshack.us/img354/5125/21yt.gif

Ich raffe gerad nicht so ganz warum das so ist.
Ich hätte eben gern, das alle 3 Container gleich lang sind in der Höhe.
Mit dem height:100%; maximiere ich den Container auf Bildschirmgröße, aber eben leider nicht auf Seitenlänge...

Kann mir jemand von euch auf die Sprünge helfen?

die Lösung deines Problems findest du wenn du mal float in die suchfunktion eingibst..

Ein absolut positioniertes Element streckt seinen Elterncontainer nicht!

Verwende statt dessen:

Code:

position: relative;

Zitat:

Zitat von \infty

Ein absolut positioniertes Element streckt seinen Elterncontainer nicht!

Verwende statt dessen:

Code:

position: relative;

Und ich dachte immer das absolute und relative Angaben nicht gemischt verwendet werden dürfen... Ich war bisher davon ausgegangen das entweder nur absolute oder nur relative Angaben benutzt werden dürfen...
*Etwas verwirrt*. :?

Zitat:

Zitat von horst

Du darfst alles einsetzen, was nötig ist.
IMHO brauchst du für dein Layout weder absolute noch relative Positionierung.
Horizontales Zentrieren macht man besser mit margin:0 auto - denn dann verschwinden die Inhalte nicht unerreichbar nach links, wenn das Browserfenster sehr schmal ist.

Ich verstehe auch nicht, weshalb du drei verschachtelte Container brauchst. Die Eigenschaften margin, border und padding sind dir bekannt?
Und warum steckst du deinen Inhalt in eine Tabelle?

Grüße
fricca

Zitat:

Zitat von fricca

Ich verstehe auch nicht, weshalb du drei verschachtelte Container brauchst. Die Eigenschaften margin, border und padding sind dir bekannt?

Hmm, ich denke ich werde den Aufbau wohl auch nochmal überarbeiten.
3 Container sind wohl wirklich etwas überdimensioniert, da ist was dran, aber ich fand den Aufbau so bisher (für mich) recht übersichtlich! :?

Naja, mal sehen.
:lol:

Danke für die Tipps und Anregungen.