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

Question

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;
}

Answer 1

After the body tag put

and close it before , then add div#page {margin: 0 auto;} to your css. Simple.

Answer 2

Unfortunately this is ridiculously complicated due to browsers implementing css differently. You will probably have to make separate code for IE and other browsers.



I recommend making a div around your entire page, let's call it #wrapper, and then use CSS to position it. Define the width of the wrapper to fit your content. To make it horizontally centered, set the left and right margin to auto.



To make it vertical center I have a couple of links you can look at:

http://tom.me.uk/html-to-css/center-vertically.html

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

http://www.wpdfd.com/editorial/thebox/deadcentre4.html

Answer 3

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






<--- Begin Container -->

<--- End Container --->

Answer 4

Hi



Most of the answers you have above are right. I'll put it in one word:



Use, in CSS, "width: a value;", "margin-right: auto;" and "margin-left: auto;"

Answer 5

I use this



align="center"



I have the content of my website in a table in the middle of the page and this seems to centre it.

Answer 6

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



margin-left: auto;

margin-right: auto;