Creating a fully centered webpage

2009-07-03T13:23:00.000-07:00

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, downsize the width of your browser right now. You should see this 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.....

Essentially the first step you need to take is styling the body of your document:

body {
    font: Arial, Helvetica, sans-serif;
    font-size: 12px !important;
    color: #fff;
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
}

It is very important that you set both width & height (well mainly height) properties to 100%. We basically do this for MSIE6. With these properties set, IE6 now understands that it has the entire viewport to play with.

Next, by convention, I normally use #container, some may use #wrapper, but, you can use whatever naming convention you'd like for your container div. Your container div is very essential in this process. Your entire document shoud be placed inside this div. It is a good practice as it allows for you to position other divs behind or in front of it with ease. e.g. if you had jQuery lightbox implemented on your website.

#container {
    margin: 0px;
    padding: 0px;
    min-height: 100%;
    height: auto !important;
    background-color: #000;
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    overflow-x: hidden;
}

Now let me explain. First off, position the container div to provide future editing in regards to z-index and so on, although most likely you won't need to. The most important property is:

overflow-x: This is our code that eliminates the horizontal scrollbar. It is a CSS3 pseudo class and is not recognised yet as valid styling, however, it works on all platforms.

Special thanks to Dexter Banfield who showed me the light with overflow. Follow on Twitter

We use the height properties for sticky footers and backgrounds which I'll explain in another post, however, it's worthy of mention here.

min-height: 100%; height: auto !important; height: 100%;

Special thanks to Dustin Diaz and his post Min-Height Fast Hack. Essentially, the min-height property works as it should on all modern browsers i.e. you specify a minimum height, and the element conforms to it with the ability to become taller. However, some versions of MSIE, don't support it. You can use this hack to achieve min-height in those browsers. B.T.W. This also works for min-width.

So now we have our container styled. Your HTML should look like this:

<body>
    <div id="container">

    </div>
</body>

If your code is correct, you should see a black page when you test in a browser.

Now let's create our extremely massive divs which allow for complete centering:

.holder {
    padding: 0px;
    width: 1300%;
    margin-left: 0px 0px 0px -600%;
    display: block;
    background-color: #333;
}

Ah yes.... the holder class. We'll use this to encapsulate each layer i.e. nav, header,etc. We make it a class as we need to use it for each new block we make. Firstly, we adhere to the block layout by defining it's display as block. This is the default layout method of any container. It's not necessary to specify it, however, it's a good practice.

What I want you to note is the width property as well as the margin property. This is a concept which may seem confusing at first and there may be a much better approach, but let's examine it a bit.

Firstly, I've set the width to 1300%. I use that figure because it works best. You can have a larger figure, but, it won't be necessary, and a lower figure, does not give the desired effect.

By using 1300%, we are specifying that this element should be 13 times the size of the viewport width.

I know, I know, you're probably asking "Why not 1200 or 1400 percent?". We'll use an odd number for one sole reason. Think about the Maths involved. We have the viewport which is 100%. Then we have this container which is 1300% with a margin-left of -600%. So what does this mean?

This container will be placed -600% to the left, which gives us an excess of 700%. 100% will cover the viewport area, therfore, we have basically a 600% space to the right.

This container is now perfectly centered.

So if were to now add a holder div to our HTML with some random text, let's see what happens:

<body>
    <div id="container">

        <div class="holder">Blah Blah Blah</div>

    </div>
</body>

You'd most likely see the grey div at the top of your page, but no text. Why? Essentially, the text is aligned to the left; -600% to the left of the viewport.

"Oh no.... This is lame, it's not working well at all". Don't say that please. There's still hope. If you want the harder way out, you can set the text-align property to center. This way you'll see the text in the middle of the screen. Try that and see how it works. Resize your browser as well.

You should see the text staying center no matter what. It doesn't stop at the left edge of the browser.

But still, text-align: center? That means that all our text,images,etc. have to be re-aligned. That's way too much work.

So let's add another div class:

.element{
    width: 900px;
    margin: 0px auto 0px auto;
    padding: 0px;
    background-color: #999;
}

N.B. margin-left & margin-right will work when you specify an explicit width. So if we add an element div to our code, let's see what happens:

<body>
    <div id="container">

        <div class="holder">
            <div class="element">Blah Blah Blah</div>
        </div>

    </div>
</body>

You should now see a black document, a dark grey div running straight across the top, a lighter grey div dead center at 900px wide and "Blah Blah Blah" aligned left.

Let's see it in a more practical manner. Add this css & html respectively to your document:

.topDiv{
    height: 200px;
}

.bottomDiv{
    height: 400px;
    background-color: #003300;
}

<body>
    <div id="container">

        <div class="holder">
            <div class="element topDiv">Hello from above</div>
        </div>

        <div class="holder">
            <div class="element bottomDiv">Hello from below</div>
        </div>

    </div>
</body>

You should now see a black document, a dark grey div running straight across the top, a lighter grey div dead center at 900px wide and 200px high with "Hello from above " aligned left as well as a dark green div below saying "Hello from below".

Note: You can apply multiple styles to one element, just be sure to arrange them in the order of override priority.

As you can see we can add more and more layers as we see fit. We can have our nav bar, header bar, footer bar and so on...

And that's all folks.....

If you have any questions, feel free to leave a comment and I hope this works for you as it does for me.

Google Maps & MSIE8 click-coordinate offset fix

2009-07-02T21:54:00.000-07:00

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:

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

New to blogging

2009-07-02T12:10:00.000-07:00

Hi everyone,

I recently decided to jump on the blogging bandwagon for two reasons:

1) Boredom

2) Too many thoughts welled up in my head

Basically I intend to post the solutions to any problem I may have encountered on the web and solved. Who knows maybe someone will find it useful....

Web Lunatic

Creating a fully centered webpage

Google Maps & MSIE8 click-coordinate offset fix

New to blogging