Vocino Labs

Recently I’ve been throwing around new ideas for an old project that keeps popping up (apparently they really want to do it now, since they’ve set a deadline). I was originally creating the standard table-intensive graphical craziness that the corporate world knows and loves. However, while jogging this morning with Trip-Hop legend Cut Chemist’s urban beats resonating through my brain via my iPod, I thought to myself, “I should be making a difference.”

And so, just before a renegade sprinkler caught my off-guard, I made the decision to scrap the already hugely bloated PSD file I had been working on and focus on the beauty of the code. Unfortunately, all these people use Internet Explorer. Therefore, my first quest was to center my fixed-width XHTML masterpiece in a way in which the slow red-haired kid we all know as IE5/Win can understand.

Currently, this is how we (those idiots that somehow got stuck making web sites for people) do it…

#Container {
     width:650px;
     margin:0px auto;
     }

Setting the margin widths to “auto” is the correct way to achieve a horizontally centered layout with CSS2. Great, right? Unfortunately, the party is over. Internet Explorer 5 doesn’t understand what’s going on, likely because of a traumatizing experience in the younger years.

Thankfully, there’s a fix. We have to take IE5 to the “special” class.

body {
     text-align:center;
     }
#Container {
     width:650px;
     margin:0px auto;
     text-align:left;
     }

IE5 incorrectly applies the “text-align” attribute to elements, such as the containing body. Sadly, IE5 needs hand-holding even to the potty. That’s why we have to apply yet another hack, this time to the #Container block, in the form of a second “text-align” attribute (seen above). Since sometimes IE5 likes to center everything without a subsequent alignment after the body, we have to apply a “left” alignment to the #Container block to counter IE5’s inability to play well with others.

For my project, specifically, I didn’t really want to use this. I want it to be as simple and clean as humanly possible. So I have one more option which, I feel, is the clearly the best.

#Container {
     position:absolute;
     left:50%;
     width:650px;
     margin-left:-325px;
     }

Look at the simple magnificence of it. The subtle richness. Basically, we’ve moved the #Content block 50% over to the right. Then to compensate for the fact that our content is 650px wide, we shift the left margin to the right at an amount half of our #Container, in this case 325px. This leaves us with a elegantly centered and cleanly coded XHTML/CSS document. What more can you ask for?

Oh, and as for IE5? As the story goes, he later became a door-to-door used shoe salesman.