How to centre this complex site (and playing with CSS animation =)

So I've been wanting to re-design my website for a while, so instead of doing university work like I should be, I started playing around with a new take on my site, which has always been circular:
http://haravikk.com/

For those of you running Safari Beta 4, you'll notice a few neat animation/transition effects.

Now, if someone could help me figure out how in the heck I get that site centred without it falling to bits, I'll be rocking

torndownunit said:

I think that's a really neat design.

Click to expand...

Thanks!

torndownunit said:

I don't have the expertise the others in the forum have, but wouldn't you just put that whole thing inside a wrapper, and set the right and left margins to 'auto' to get that entire thing centered? That shouldn't affect anything else.

Click to expand...

Alas, if only it were that simple. The box with the image(s) in it doesn't have a specific width, so that trick won't work

torndownunit said:

Could the wrapper be made large enough to take whatever the maximum width of the box with the images could be into account?

Click to expand...

The box size is dependant on the height of the image which is always 100% of the viewable area, with a maximum height of 1300 pixels (the image is 1300 x 1300). There's no way in CSS that I can find to say "make the width the same as the height", and 100% for width of course means 100% of the view-area which isn't right. And I don't want to specify a pixel size as the aim is to have the page scale to almost any-size.

I wish CSS had more useful sizing/positioning commands, as it stand they're actually pretty limited, and of course many of the most useful ones are inconsistent across certain well known browsers...bah!

I could use javascript, but I'm hoping to make the site a "graceful" javascript site, where it will work pretty much the same without javascript by loading pages separately; currently when you click things it loads a new page with the new content created via PHP, however ideally when you click, javascript will interpret the command instead, and display the result instantly on the same-page.

So far I've resorted to cheating; I've used absolute positioning to nudge my layout in 25% from the left, which in most screens will position it roughly on-centre, I then use javascript to put it bang-on for browsers that have it enabled.

The page has been all AJAXified now, it still has no real content, but it's nice, also uses javascript to approximate the glowing H animation on Firefox/Camino (but not on Chrome, which has horrible .png opacity issues at the moment). I've even got some preliminary support for a different theme for mobiles, which of course uses CSS animation for iPhones, though currently there may be some issues, and I only have iPhoney for testing compatibility, and I'm not convinced it's a fully accurate representation of an iPhone's browser.

If someone does know how I could go about actually centring the site with CSS though, then I'd still very much appreciate it, as I don't like even the fraction-of-a-second error it currently has