View Single Post - [SOLVED] Centering a layer based page for different screen sizes?

Mulith · #1 (**permalink**) Oct 27th, 2007, 11:06

Hi there! A little bit lost on how to centre a page that consists of five layers namely: Header, Left_container, Centre_container, Right_container and Footer. Just want to make sure it remains in the centre of the page regardless of what screen size the browser is using.

Here is the code I've started with:

Code: Select all

 
style type="text/css">
<!--
#header {
        position: absolute;
  left    : 10px;  
  top     : 10px;
  width   : 996px;
  Height  : 140px;
  z-index : 1;
  }
#left_container {
        position: absolute;
  left    : 10px;
  top     : 160px;
  width   : 185px;
  height  : 800px;
  z-index : 2;
  }
#centre_container {
        position: absolute;
  left    : 205px;
  top     : 160px;
  width   : 606px;
  height  : 800px;
  z-index : 3;
  }
#right_container {
        position: absolute;
  left    : 821px;
  top     : 160px;
  width   : 185px;
  height  : 800px;
  z-index : 4;
  }
#footer {
        position:absolute;
  left    : 10px;
  top     : 970px;
  height  : 170px;
  width   : 996px;
  z-index : 5;
  }
</style>
 
</head>
<body>
<div id="header">
</div>
<div id="left_container">
</div>
<div id="centre_container">
</div>
<div id="right_container">
</div>
<div id="footer">
</div>
</body>
</html>

Any Ideas?