Creating a fully centered webpage and adding dynamic background elements

So, here we go again.

We've all read many articles on fully centering an element of a webpage e.g. a div or an image, and most likely they were great. I've read some that use css and many that use javascript to achieve the desired look and feel of your webpage. What I want to talk about today, is centering the entire webpage.

For those of you who need an example, click here (opens in a new tab) and downsize the width of your browser. You should see the page keeping it's center point no matter how slim the window may be, as well as no horizontal scrollbars appear when you downsize.

You're probably asking "Why would I want to do this?".

Essentially, there is no real reason why you should do this, however, if you're looking to add a bit extra to your website, this could prove to be an interesting take on design.

Before we continue, allow me to point out the cons of this approach:

1) This method is not friendly to users with a low screen resolution (They will never see a horizontal scrollbar).

2) If you're looking for a W3C CSS Validation Tag, you won't get it because of one CSS3 property used in this method - overflow-x

So, let's get started.....

Google Maps & MSIE8 click-coordinate offset fix

As you probably know, the google maps api is an intuitive way to display addresses, locations, and information targeted at your users. The api is simple to use, well documented and best of all free for non-enterprise usage.

As with every system, there must be a hiccup somewhere along the line. Take for instance the map that should be visible above. There is a default marker set in the middle and it displays the general location of my hometown. If you click on it, the marker will change position to wherever you clicked.

If you are on any browser besides Microsoft Internet Explorer 8, it should work flawlessly. The problem I'm speaking about lies within MSIE8. If you click anywhere on the map, the marker will change position, however, it's placed with about a 1 ½ inch offset (providing blogger isn't already on the MS compatibility mode listing). This is not the fault of the api....

There is hope though. Microsoft has been generous enough to issue a meta tag that can solve this problem:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

This tag basically forces MSIE8 to emulate it's predecessor MSIE7... And here I was thinking that the browser was an upgrade.