Using tables is a thing of the past in Web 2.0, unless of course your making an actual table. It’s a faux-pa to use them for layout in this day and age. The 2.0 mantra is content separate from design, limited HTML markup and CSS handling display. Though sometimes CSS doesn’t always cut it and you end up doing something that isn’t very modern just to get the job done. One thing that I always revert back to tables is when I have to center something vertically and horizontally in the window.
I’ve looked all over the place trying to find something that was simple, worked for IE and could have a fixed size box. In my search I found this solution that uses display to render a div as a table or table cell. It’s pretty good, but it doesn’t work with a fixed box size. I tweaked a little bit and now it can work with a fixed box size. I added an extra div called box to center . The only problem that I see with it is that the doctype has to be set to HTML 4 Transitional. For most projects, I don’t imagine this is a deal breaker. I’ve posted a minimal example. The HTML page can be found here. This has been tested in IE 6, Safari 3, Chrome 1, and Firefox 3.