Andi Smith on February 6th, 2008

While web developers could once rely on the safety of tables for their web designs, more and more recently table layouts have been frowned upon in the design community in favour of DIV based layouts. Tables should be for tabular data, after all.

The only problem is DIV based layouts from the outset can seem much more daunting and complicated, especially for people new to web development - mainly due to each layout requiring a different coding strategy to get the columns laid out nicely, the code being split between HTML and CSS, and the requirement to test the layout in at least two browsers for compatibility issues.

Enter the Layout Gala - a handy website I recently stumbled upon - which contains 40 of the most popular layouts all made using cross-browser friendly DIV code. Now whenever you need a new look, just visit this site find the layout you want and download the skeleton HTML for stress free DIV based websites. Woohoo!

Click here to visit the Layout Gala

Layout Gala Image

On a side note, if you find yourself needing a DIV layout with equal length columns, check out these articles:

  • Faux Columns - A simple background image trick which should be suitable for most solutions.
  • Project 7 Equal Height Columns - A simple javascript which extends the columns to the length of the largest column. It can either be fully extended on load or visibly extend in front of your eyes.

Continue reading about Layout Gala