Four-hour timesaver

HANDELAAR -- While John Handelaar tirelessly tweaked the CSS layout behind his search-engine-friendly, 25000-legacy-articles gallery, he hit upon a finding that stemmed from four hours of tedious web coding. Web developers would do well to benefit from his discovery. He wanted to avoid using tables for the usual reasons. He needed to "put a 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."

Handelaar "hit on a very irritating thing to do with the layout of three obligatory banners and buttons in the site header ... a DIV called BANNER at the top of a page." Inside that DIV would be a standard banner flanked on each side by a 120x60 button.

He wanted something like Garrett did here.

To get the page-wide effect fitting neatly above a fixed-width site layout of 760 pixels, which is what he was working with, he put that into a nested container <div>, made sure that was also text-align: center;, but although that works in IE, every other browser doesn't agree.

He forgot one important thing.

The nested container div needs to have explicitly-set margins. margin: auto; fixes that.

If you remember this, you won't have to mess around with a rambling stylesheet for a half day.

---

Thank John Handelaar for sharing.
x_ref143wd