Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 18.08.2005, 15:23
horst horst ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.08.2005
Beiträge: 3
horst befindet sich auf einem aufstrebenden Ast
Standard 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:


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:


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?
Mit Zitat antworten
Sponsored Links