How can I position my HTML page to appear in the centre no matter how big the monitor...

12-01-2008, 09:30 PM

...or the page is ? ? I have an external CSS, design for my page, but i cant get my top bar, bottom bar, left nav and right nav to appear in the middle of the page unless i give them an absolute postion with pixels? here is what it is ... can u help please i know it has to be relative but i dont exacly know how to get it working ...

* Around the page style */

#topbar
{
background-image:url("imgs/Banner2.jpg");
position: absolute;
top: 0px;
left: 0px;
width: 754px;
height: 100px;
}

#bottombar
{*
background: #ffffcc;
position: absolute;
top: 500px;
left: 0px;
width: 754px
height: 60px
}

#leftNav
{*
background: #ffffcc;
position: absolute;
top: 100px;
left: 0px;
width: 150px;
height: 500px;
}

#content
{*
background: #ffffff;
position: absolute;
top: 100px;
left: 150px;*
width: 500px;*
height: 500px;
}

12-01-2008, 09:30 PM

Take out the position:absolute and top and left properties and then add:

margin-left: auto;
margin-right: auto;

12-01-2008, 09:30 PM

After the body tag put <div id="page"> and close it before </body>, then add div#page {margin: 0 auto;} to your css. Simple.

12-01-2008, 09:31 PM

i find the simplest way to wack everything in the center of the page is by using a master div called #container

basically u have all your other divs inside this div and center the container div by doing the following : An example

<html>
<body
<--- Begin Container -->
<div id ="container>
<div id ="header"> </div>
<div id ="footer"> </div>

<--- End Container --->
</div>
</body>
</html>

the css for the container :

#container{
width:708px;
margin-left:auto;
margin-right:auto;
}

obviously the width of the container is determined by the width of ur layout.