Centering an entire page

[Black Max]

I've spent some time doing another freebie design for a nonprofit organization, this one a local animal rescue outfit with a truly awful site of their own. Here's the link to the demo. (Yes, their logo's ineffably cheesy, but their dogs can handle Photoshop with about the same skill as I have, so the logo stays unless someone wants to donate one. )

I looked at the site demo on a much larger display than I normally have access to, and was not pleased to see that it doesn't center, but lines up on the left. Of course it does, I didn't tell it to do otherwise.

My question is, what's an easy and (relatively) painless way to go back and center it? I'm familiar with the classic method from Dan Cederholm and others, but, perhaps because I'm not using a fixed layout, it doesn't work. Or I did something stoopid and it didn't work, always a possibility.

I know it's a duh! question with a simple answer, but hey, how do I learn if I don't ask the dumb questions?

[pmw57]

Setting the left/right body margin to auto should do the trick

body {
    margin: 0 auto;
    ...
}

[Black Max]

Paul, I thought that was too simple to actually work!

Edit: it works perfectly, of course. I was thinking less of Occam's Razor and more of Murphy's Law.

[pmw57]

It does seem though that the slugline is falling off to the side. This is because it's position is set as an absolute, which is in terms of the next higher up relatively positioned element.

As there is no parent element that is set to relative, the slugline is positioned according to the window itself.

You'll want to set the header to be the relative reference for positions within it. This doesn't affect the header itself, but it does mean that the slugline will be positioned relative to the header instead, properly as it should be.

#header {
    position: relative;
    ...
}

[RyanReese]

Hi, you should avoid auto margins on the body as IE7< have several bugs related to that.

You should instead make a wrapper div enclosing the entire page and give a width and auto margins to that instead .

[pmw57]

Originally Posted by RyanReese

Hi, you should avoid auto margins on the body as IE7< have several bugs related to that.

He's right. You can use IETester to test multiple versions of IE at the same time, which really helps to spot potential issues.
http://my-debugbar.com/wiki/IETester/HomePage

[Erik J]

Originally Posted by Black Max

...
My question is, what's an easy and (relatively) painless way to go back and center it? ...

Without any changes to the html; That would be to remove the float from the header, the colmask, the footer, and apply auto margins and widths on them (instead of on the body).

#header,
.colmask,
#footer {
	float: none;
	margin: 0 auto;
	min-width: 600px;
	max-width: 1200px;
}

[Black Max]

Originally Posted by pmw57

It does seem though that the slugline is falling off to the side. This is because it's position is set as an absolute, which is in terms of the next higher up relatively positioned element. ... You'll want to set the header to be the relative reference for positions within it.

Paul, thanks for finding that and suggesting a fix. That was a blunt-force, quick-fix solution to a problem that I never went back and corrected.

Originally Posted by Erik J

Without any changes to the html; That would be to remove the float from the header, the colmask, the footer, and apply auto margins and widths on them (instead of on the body).

Erik, that's an excellent fix that I will implement. I have created about twelve pages of the site and didn't want to go back and adjust a boatload of HTML if I don't need to.

Ryan, thanks for your suggestion. I'm assuming that Erik's solution won't cause hiccups in IE6 and 7...?

[pmw57]

Originally Posted by Black Max

Ryan, thanks for your suggestion. I'm assuming that Erik's solution won't cause hiccups in IE6 and 7...?

Try them out with IETester and check to see how they look.

[Black Max]

Can't install IETester because my Windows setup is old, creaky, and not quite kosher.

I'm running it through Browsershots now, and so far everything looks good.

Edit: There are minor issues with its display in IE6, but I just don't care.

[RyanReese]

It won't cause too many issues other then it not understanding min/max width ..

[Black Max]

Originally Posted by RyanReese

It won't cause too many issues other then it not understanding min/max width ..

This will handle that, right...?

* html #whatever { 
   width: expression( document.body.clientWidth > 1199 ? "1200px" : "auto" );
}