centreing a whole page with layers

Gerry · August 31st, 2007, 07:28 PM

Hi gang,
I know I should know this, but this late at night it's got me on a go slow.
I've built a page in dreamweaver with layers (divs) and now I want the whole page to centre in the browser, but it wont do it.

I have hand coded another div in the code

Code:

 
<body>
<div class="container" id="container">
 
whole page content here
 
</div>
</body>

then, with css, styled the container as follows

Code:

 
.container {
 text-align: center;
 margin: 0 auto;
 padding: 0px;
}

I have layers/divs within the main body that have absolute positions, but didn't think that would be a problem as they are all within the container....could it be they are positioning themselves absolutely to the top and left even though the containing div is centred as a whole?

any suggestion would be very welcomed
much appreciated

(I'd rather not turn it into tables and cells, and it needs to work as a template with regions added to numerous pages, as it will be edited via contribute eventually)

alexgeek · August 31st, 2007, 08:19 PM

this is css not html

why do you have a class and id defined for container
you only need one

pa007 · August 31st, 2007, 08:50 PM

I don't think this will work if it's absolutely positioned. Absolute positioning (like all other positioning) takes the elements it is applied to out of the flow of the document. The thing is with absolute positioning is that it is just that, absolute. It won't move anywhere, that's the point.

Pete.

hschmitz · September 1st, 2007, 09:14 AM

To make the layer centred on the page you need to put the text-align: center in the CSS of the body.

Quote:

Originally Posted by Gerry

I have layers/divs within the main body that have absolute positions, but didn't think that would be a problem as they are all within the container....could it be they are positioning themselves absolutely to the top and left even though the containing div is centred as a whole?

If you want those layers to be absolute but relative to the container, you need to specify position:relative in the container. So the whole thing should look like this

Code:

 
body {
  text-align: center;
}

.container {
 position: relative;
 margin: 0 auto;
 padding: 0px;
}

Hardbyte · September 4th, 2007, 07:17 AM

Dont need to text align anything centered!

You would need 2 wrappers. One being width:100%; and the other inside this being the width of the site and margin 0 auto (width:600px; margin:0 auto

moojoo · September 4th, 2007, 11:25 AM

You can't center an object if it has no width. Add a width and margin:0 auto; will work. And you certainly don't need to contain the div in another 100% wrapper. All you need is the container and then put everything in that.

The only reason you would need text-align:center; on the body is for IE 5.x as it won't read margin:0 auto;

IE 5.x compatible.

Code:

body {
text-align:center;
}

.container {
text-align:left;
width:770px;
margin:0 auto;
}

Correcting your existing code.

Code:

.container {width:770px;text-align: center;margin: 0 auto;padding: 0px;}