In the past people used tables to lay out their pages the way they wanted them to be because, although sometimes difficult, it made putting boxes side-by-side simple. The way we do things now with floats and margins and all these other hacks has become quite annoying and, dare I say it, stupid. You have to know way too many 'hacks' if you wish to make a professional layout without using tables. I have found a solution that, in the future, will become THE way to design web pages. I say "in the future" because currently none of the IE browsers support it (of course) but it will be supported in IE8, which isn't too far away from its release. So it's just something to keep in the back of your mind until a large enough portion of society has adopted the "right" browsers.

This design philosophy is called CSS Tables. There are no <table> tags involved because tables are supposed to be used with tabular data. The idea of CSS Tables uses <div> tags to separate data and uses the CSS display property to make them act like tables, table rows, and cells. This seriously takes away from the complexity of making multi-column layouts. Here is an example:

XHTML


CSS


Using the display property we changed the div with the id of "main" into a pseudo table. We also changed the divs within the table div into table cells. Notice the lack of table row. If you only have one row the enclosing row element doesn't need to be there. The browsers create an anonymous table row element for them to reside in. You can even skip the container element that makes the table. All you really need is the table cells. An example requiring table rows (but doesn't include the table) is below:

XHTML


CSS


This can make web design so much simpler and will allow even novices to CSS to make logical and pretty layouts without much work. I personally can't wait for the future when this will become available to use without worry that only a small portion of users will be able to see my web pages in all their glory.