How to center a website accross all browsers using CSS

Vince Cutting — Tue, 21 Oct 2008 22:23:41 +0000

Now I’m not sure about you, but I really do hate websites that are stuck on the left of the screen, and from talking to a few friends, I know I’m not alone with this pet hate. The thing is, that many beginner site designers may also dislike this left alignment, but simply do not know how to make their site appear in the center of the screen, but others may have centered their site absolutely perfect in their favourite browser, but are totally unaware that it may not be centered in others.

Today, I’d like to share my own method of centering your website in any browser using CSS – I’m going to be using CSS in the head of the HTML document today for simplicity, although ideally you should place it into an external/linked stylesheet on your own pages.

The trick to centering pages in all browsers is using what’s commonly known as a ‘wrapper’, applying some auto margin to that div in the CSS, and then using a small workaround so that the wrapper is centered in IE.

I’m going to start by using a basic outline template, demonstrating the basic page structure and illustrating what I mean buy the wrapper – which is commonly just a div to contain everything in.

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http-equiv="Content-Type" content="text/html; charset=utf-8" />
</span></span>Title<span class="sc2"><span class="kw2">
name="robots" content="index, follow" />
name="keywords" content="" />
name="description" content="" />
type="text/css">
body, html {
margin: 0;
padding: 0;
}
#wrapper {
width: 800px; /* your wrapper obviously needs a width otherwise it will be 100% */
margin: 0 auto; /* This is the proper way to center in a standards compliant browser */
}
/* This is the IE workaround*/
body { text-align: center; }
#wrapper { text-align: left; }
/*Now to just add some colour to see it in action*/
body { background: #000; }
#wrapper { background: #fff; color: #000; }
id="wrapper">
Title
Content to go here.

Now you can see the structure is fairly simple – the wrapper is just a div with a id of “wrapper”, which we specify a width for, and then set the margins to “0 auto”, which means no pixels for top and bottom margins, and auto for left and right margins. the auto value for margins basically gives the left and right edges equal space between the edge of the wrapper div and the edge of the browser window.

Next, we have to add the workaround for IE6, because it doesn’t understand auto as a value for margin. We basically do this by using text-align:center for the body to center the div on the page, but this will also center everything inside the div too, so we then have to re-align this to the left again using text-align:left for the div itself.

I’ve applied some background colours to the body and the div, so that you can see the centering effect for yourself – go ahead and try it for your own pages, and test it in different browsers…enjoy.

Running IE6, IE7 and IE8 on the same pc (even on Vista)

Vince Cutting — Tue, 21 Oct 2008 12:20:15 +0000

For many web designers and developers, getting a website to look and function the same in different browsers can often be a challenge. This challenge is often made even more difficult when trying to achieve the same appearance across Microsofts hugely different versions of it’s Internet Explorer browser – none of the IE browsers have ever complied to web standards, and each different version comes with it’s own quirks to deal with. So you would think you could just install all the different versions and test your web pages in each of them…wrong, it’s often impossible to get all the different versions (namely IE6, IE7 and IE8) running on the same computer, especially if you are running Windows Vista which will not let you install IE6 at all.

For XP users, Tredsoft’s “Multi IE” (http://tredosoft.com/Multiple_IE) has been a godsend for a while now, although this solution still will not work on Windows Vista.

I stumbled accross something today, whilst searching for a solution to this Vista problem, and this solution will actually allow Vista users to preview web pages utilising a online rendering engine for IE5.5, IE6, IE7 and IE8beta2, all nicely packaged up into a single desktop application, which even allows you to view say a IE6 rendered page alongside a IE7 rendered version of the same page. This program is called “IE Tester” from www.my-debugbar.com, and it absolutely blew me away when as found it, as it does exactly what I need (viewing pages under different Internet Explorer rendering engines) IN WINDOWS VISTA!

If you are suffering the nightmare scenario of needing to test website pages in different versions of Internet Explorer, but cant install all the different versions you need onto the same PC, and especially if you are needing to do this in Windows Vista, then I recommend you give IE Tester a try – it works like a dream for me, and saves me having to run a seperate XP computer just for testing.

You can download MyDebugbar’s “IE Tester” from the following link: http://www.my-debugbar.com/wiki/IETester/HomePage

IE Tester Screenshot

Vince Cutting » internet explorer

How to center a website accross all browsers using CSS

Title

Running IE6, IE7 and IE8 on the same pc (even on Vista)