Submitted by johnh on July 13, 2004 - 01:36.

This was bugging me for hours today.

So we have a new client or two, who have been my 24/7 concern recently since a certain unnamed company decided to pay neither my last month's salary nor the £1500 they owe me for underpaying for 4 months, and decided to inform me of this on the day it was due to hit my account, which in turn is the day before my rent was due. But I digress.

There's a whole bunch of cool stuff to do with both our new efforts, which I'll be showing you next week in all their CSS-layout, search-engine-friendly, 25000-legacy-articles glory. Today, however, I hit on a very irritating thing to do with the layout of three obligatory banners and buttons in the site header:

1. Imagine, if you will, a <div> called 'banner' at the top of a page. In it are a standard banner flanked on each side by one of those 120x60 button ads. Niceness and an aversion to tables for the usual cross-browser, accessibility and whatnot reasons requires that we put the left button in first and float it left, then the right button floated right, then the larger one in the middle. Our 'banner' <div> is set to be text-align center; to make all three be evenly spaced. You end up with something like this. [Thanks, Garrett.]
2. To make that page-wide thing fit neatly above a fixed-width site layout of 760 pixels, which is what we're working with, we put that into a nested container <div>, make that also text-align: center;, and Bob's yer uncle. In IE. Every other browser suddenly ranges everything left.

What did we forget which is entirely unobvious here? The nested container div needs to have explicitly-set margins. margin: auto; did the trick, and the point of this post is that perhaps you may not have to dick around with an enormous stylesheet for 4 hours like I just did. That is all.

delicious | digg | reddit