Problem with centering a layout-relative to browser window size using CSS

Advert test
#1
Hi all
I'm having trouble centering a layout. I'm using Dreamweaver and CSS. If you look at this page to understand what I mean:
TheDigiPort - www.thedigiport.com : You have located the Digital World.
If you resize your browser window on that site, the site moves so as it remains in the center always, obviously until you go too far then a horizontal scroll bar appears.
I've searched everywhere for the answer to this question, and I'm betting it's a real simple and easy fix too!!
Can anyone help?
Cheers

edit: I'm using the "draw AP Div" method in Dreamweaver to place all the elements on the page.
 
#2
Can you post your css?

Most of the time you wrap your page in a wrapper div and use something like the follwing css to centre it...

body {
text-align: center;
}

#container {
margin: 0 auto;
width: xxxpx;
text-align: left;
}


That'll work on nearly every browser.
 
#3
Code:
<!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>Untitled</title>
<style type="text/css">
<!--
body {
    background-image: url(bg.jpg);
    margin-left: 0%;
    margin-right: 0%;
}
#apDiv1 {
    position:absolute;
    left:277px;
    top:85px;
    width:214px;
    height:7px;
    z-index:1;
}
#apDiv2 {
    position:absolute;
    left:75px;
    top:73px;
    width:29px;
    height:710px;
    z-index:1;
    background-image: url(leftcol.jpg);
}
#apDiv3 {
    position:absolute;
    left:840px;
    top:73px;
    width:30px;
    height:710px;
    z-index:2;
    background-image: url(rightcol.jpg);
}
#apDiv4 {
    position:absolute;
    left:104px;
    top:66px;
    width:736px;
    height:16px;
    z-index:3;
    background-image: url(topcol.jpg);
}
#apDiv5 {
    position:absolute;
    left:297px;
    top:824px;
    width:193px;
    height:64px;
    z-index:4;
}
#apDiv6 {
    position:absolute;
    left:104px;
    top:772px;
    width:736px;
    height:19px;
    z-index:5;
    background-image: url(botbar.jpg);
}
#apDiv7 {
    position:absolute;
    left:104px;
    top:81px;
    width:736px;
    height:692px;
    z-index:6;
    background-color: #FFFFFF;
}
#apDiv8 {
    position:absolute;
    left:100px;
    top:83px;
    width:228px;
    height:46px;
    z-index:7;
}
#apDiv9 {
    position:absolute;
    left:79px;
    top:130px;
    width:484px;
    height:131px;
    z-index:8;
}
#apDiv10 {
    position:absolute;
    left:79px;
    top:293px;
    width:787px;
    height:35px;
    z-index:9;
    background-image: url(navbg.jpg);
}
#apDiv11 {
    position:absolute;
    left:79px;
    top:328px;
    width:235px;
    height:451px;
    z-index:10;
    background-image: url(leftbar.jpg);
}
#apDiv12 {
    position:absolute;
    left:79px;
    top:344px;
    width:235px;
    height:26px;
    z-index:11;
    background-image: url(navhebg.jpg);
}
-->
</style>

</head>
<body>
<div id="apDiv2"></div>
<div id="apDiv3"></div>
<div id="apDiv4"></div>
<div id="apDiv5"></div>
<div id="apDiv6"></div>
<div id="apDiv7"></div>
<div id="apDiv8"><img src="u.jpg" width="356" height="45" /></div>
<div id="apDiv9"><img src="image1.jpg" width="787" height="163" /></div>
<div id="apDiv10"></div>
<div id="apDiv11"></div>
<div id="apDiv12"></div>
<div align="left"></div>

</body>
</html>
I haven't made the style sheet external yet :p
So how do I assign a wrapper tag?
Thanks for the speedy response.
 
#4
Change body to the following:
<style type="text/css">
<!--
body {
margin: 0 auto;
}

However it won't work in IE6. So use what n3tFl0w above suggested. Use a wrapper div and use text-align:center on the body to accommodate IE6.
 
#5
I have tried that, and it has worked to a certain extent for me. I'm having trouble placing div tags inside of the wrapper div. The first element (say, an image) I put in will center the way I want the whole page to do, but Dreamweaver won't let me move the image around, and anything else I place on the page stays where I put it, instead of moving with the image :S

EDIT: That site I gave as an example uses tables, and it's possible in Dreamweaver to use Layout Tables to achieve this. What are your thoughts on this? Is it up to standards to do it this way?
 
#6
I have tried that, and it has worked to a certain extent for me. I'm having trouble placing div tags inside of the wrapper div. The first element (say, an image) I put in will center the way I want the whole page to do, but Dreamweaver won't let me move the image around, and anything else I place on the page stays where I put it, instead of moving with the image :S

EDIT: That site I gave as an example uses tables, and it's possible in Dreamweaver to use Layout Tables to achieve this. What are your thoughts on this? Is it up to standards to do it this way?
To move an image around use background-position: 50% 0;
that would set an image at the center of the screen.

You can also use short hand:
background:#360404 url(img/bg.png) no-repeat 50% 0pt

first part is color: #360404
second part is image url.
3rd part is how to tile the image.
4th part is position of image relative to containing div.

Dreamweaver is a good editor, but I wouldn't rely on it for understanding CSS.
 
#7
Centered page in all browsers

Another suggestion for you
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/URL]">
<html xmlns="[URL="http://www.w3.org/1999/xhtml"]XHTML namespace[/URL]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled</title>
<style type="text/css">
<!--
body       { margin:0 ; padding:0 ; background-image: url( 'bg.jpg' ); }
#container { margin:0 auto ; width:950px ;   }
#container { min-height:500px ; height:auto !important ; height:500px  }
#container { border:1px solid #cccccc; background-color:#ffffff ;  }
-->
</style>
</head>
<body>
<div id="container">
<h1>Container Style</h1>
<p>A 950 pixel wide container centered <br />With 500 pixel min height<br />Border and background color</p>
</div>
</body>
</html>
For the rest of your code position:absolute is probably not the best way to go
 
Top