[SOLVED] Centering a layer based page for different screen sizes?

Mulith · #1 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?

Marc · #2 Oct 27th, 2007, 11:14

Because you are using position:absoloute this makes it really hard to center the page. Can i see your layout please?

Normally we can just create a container and give it a margin:0 auto;....

Cheers,
Marc

EDIT: After opening your site in Dreamwever... Why dont you use a simple 3 column layout with floats?
A good tutorial of 3 column layout is at the bottom of this page: http://css.maxdesign.com.au/floatutorial/.

Mulith · #3 Oct 27th, 2007, 11:27

You should be able to see the layout in the code i posted but here is an image of the layout.

http://www.webforumz.com/attachment....8&d=1192970971

Marc · #4 Oct 27th, 2007, 12:04

Did you see my above post after i edited?

Mulith · #5 Oct 28th, 2007, 21:54

The problem is I'd like the containers to remain the same size. The one you are refering to resizes the columns according to the size of the window.

Is there a way to make sure that the columns don't resize but have a static width and still remain centred?

Monie · #6 Oct 29th, 2007, 04:21

It is more easier if you could post your HTML code along with the CSS so we can test them in our browser.

If not, it will only be a "theory" solution

Thanks..

Mulith · #7 Oct 30th, 2007, 00:01

Ok here we go:

Code: Select all

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Buy or Sell a business on Business4Sale.co.uk</title>
<style type="text/css">
<!--
#body_style {
                    margin-left:auto;
                    margin-right: auto;
                    width : 996px;
                    border: none; 
                    }
#header {
                    position: absolute;
                    left    : 0px;  
                    top     : 10px;
                    width   : 996px;
                    height  : 140px;
                    z-index : 1;
                    background-color:#0000FF;
               }
#left_container {
                    position: absolute;
                    left    : 0px;
                    top     : 160px;
                    width   : 195px;
                    height  : 800px;
                    z-index : 2;
                    background-color:#00FF00;
                       }
#centre_container {
                    position: absolute;
                    left    : 205px;
                    top     : 160px;
                    width   : 586px;
                    height  : 800px;
                    z-index : 3;
                    background-color:#FF3300;
                            }
#right_container {
                    position: absolute;
                    left    : 801px;
                    top     : 160px;
                    width   : 195px;
                    height  : 800px;
                    z-index : 4;
                    background-color:#00FF00;
                         }
#footer {
                    position: absolute;
                    left    : 0px;
                    top     : 970px;
                    height  : 170px;
                    width   : 996px;
                    z-index : 5;
                    background-color: #0000FF;  
            }
</style>
 
</head>
<table class="body_style">
<tr> <td>
<body class="container">
<div id="header"> </div>
<div id="left_container"></div>
<div id="centre_container"></div>
<div id="right_container"></div>
<div id="footer" ></div>
</td></tr>
</table>
</body>
</html>

Monie · #8 Oct 30th, 2007, 00:50

Hemmm... You might try this:

HTML: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MonieWeb[2007] @Copyright Reserved 2007</title>
<style type="text/css">
<!--
body {
    margin: 0;
    padding: 0;
}
#container {
    width: 80%; /*your container div width*/
    margin: 0 auto; /*this is the magic word to center your div in the center(horizontal) of your screen*/
}
#header {
    width: auto;
    height: 140px;
    background-color: #0000FF;
}
#left_container {
    float: left;
    width: 195px;
    height: 800px;
    margin: 5px 25px 5px 0;
    background-color: #00FF00;
}
#centre_container {
    margin: 5px 200px;
    width: auto;
    height: 800px; /*set this to auto if you want the height depends on the content*/
    background: red;
    }
#right_container {
    margin: 5px 0 5px 5px;
    float: right;
    width: 195px;
    height: 800px;
    background-color:#00FF00;
}
#footer {
    height: 170px;
    width: auto;
    clear: both;
    background-color: #0000FF;  
}
-->
</style>
</head>

<body>
<div id="container">
    <div id="header">My Header</div>
    <div id="left_container">This is a fixed height left container</div>
    <div id="right_container">This is a fixed height right container</div>
    <div id="centre_container">
        Content Content Content Content Content Content Content Content 
        Content Content Content Content Content Content Content Content
        Content Content Content Content Content Content Content Content 
        Content Content Content Content Content Content Content Content   
        Content Content Content Content Content Content Content Content 
        Content Content Content Content Content Content Content Content   
        Content Content Content Content Content Content Content Content 
        Content Content Content Content Content Content Content Content   
        Content Content Content Content Content Content Content Content 
        Content Content Content Content Content Content Content Content   
        Content Content Content Content Content Content Content Content 
        Content Content Content Content Content Content Content Content   
        Content Content Content Content Content Content Content Content 
        Content Content Content Content Content Content Content Content   
        Content Content Content Content Content Content Content Content 
        Content Content Content Content Content Content Content Content   
        Content Content Content Content Content Content Content Content 
        Content Content Content Content Content Content Content Content   
        Content Content Content Content Content Content Content Content 
        Content Content Content Content Content Content Content Content   
        Content Content Content Content Content Content Content Content 
        Content Content Content Content Content Content Content Content   
        Content Content Content Content Content Content Content Content 
        Content Content Content Content Content Content Content Content   
        Content Content Content Content Content Content Content Content 
        Content Content Content Content Content Content Content Content   
    </div>        
    <div id="footer" >Footer</div>
</div>
</body>
</html>

Mulith · #9 Oct 30th, 2007, 08:37

Bingo!!! Thats worked perfectly. Just changed the width from 80% to 996px for design in 1024x768 because i wanted to keep the centre container width fixed. I owe you one Monie!

Mulith · #10 Oct 30th, 2007, 14:43

One problem I've just noticed. The layout doesn't work properly in IE6. Its fine in firefox though. any suggestions?

Mulith · #11 Oct 30th, 2007, 14:56

Problem solved. Made a newbie mistake. Adjusted the second margine in the left container to 0px from 25px.

Monie · #12 Oct 31st, 2007, 02:40

Nice.. glad to know you sorted it out!
If you have any more problem related to CSS, you might want to visit the CSS Section in this forum to learn the basic idea of CSS (Layout, FAQ etc..)

Cheers..

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
dreamweaver layer alignment in all screen resolution	shinesmithdas	Web Page Design	1	May 16th, 2008 22:47
[SOLVED] page centering issues	VanderBOOM	Web Page Design	12	Dec 4th, 2007 15:06
[SOLVED] Centering an image with CSS without moving anything else on the page.	Ed	Web Page Design	5	Oct 29th, 2007 11:34
Page Sizes	Maverick25r	Web Page Design	11	Feb 26th, 2007 17:24
About to lose my mind....centering div layer	fairydreamz23	Web Page Design	7	Nov 30th, 2006 02:03

		Webforumz.com > Main Forums > Design Your Website > Starting Out
[SOLVED] Centering a layer based page for different screen sizes?