My company is busy developing the next generation shopping cart application. We are looking to break our usual mould and use some new technologies – well, some are old and established and some are new – such as CSS (so that we can optimise the shopping card for Search Engines), XHTML, Java EE, JBoss Seam, JSF, EJB3 and JPA.

In the past, I have used frames and tables to a very large extent for layouts. However, this has quite a few problems:

• Search Engines cannot work with Frames particularly well
• Screen readers cannot read Frames and Tables based websites properly
• Coding Login and Logout using Frames requires JavaScript hacks
• and many more…

So I decided to look for a way to use CSS for layouts. Initially I managed to get hold of a layout that got us off the ground. However, we quickly realised that if we were serious about our product, we needed a better layout…something that made better utilisation of the Screen real estate.

Most CSS layouts out there are lame, to say the least. They simply use a width of 800 pixels. Come on designers, most people have a monitor with 1024 pixels width these days…and even more so on wide screen laptops such as mine. So why waste this space?

So I set out to search for a layout that had a header, a top menu, 2 to 3 columns with one column having fluid width and a footer that stuck to the bottom of the screen/content. Easier said than done. It so happens that what I was looking for was the “Holy Grail of CSS”. And the search proved to be just as difficult and frustrating as the search for the real “Holy Grail”.

I searched on Google. I asked the question on LinkedIn Answers. And I tried many a times in vain to create a layout of my own.

Well, I must say, I had quite a few sleepless nights…and a lot of frustration. However, I kept at it. And finally, I have managed to come up with a set of my own layouts.

I have uploaded all my layouts in a single zip file here.

These layouts are as follow:

• 1colsbottomfooter – 1 column with footer sticking to the bottom of the screen/content
• 1colsleftnavslickbottomfooter – 1 column with footer sticking to the bottom of the screen/content and extra CSS for navigation
• 1colstickyfooter – 1 column with footer sticking to the bottom of the content
• 2colsleftnavbottomfooter – 2 columns with left nav and footer sticking to the bottom of the screen/content
• 2colsleftnavslickbottomfooter – 2 columns with left nav and footer sticking to the bottom of the screen/content and extra CSS for navigation
• 2colsleftnavstickyfooter – 2 columns with left nav and footer sticking to the bottom of the content
• 2colsrightnavbottomfooter – 2 columns with right nav and footer sticking to the bottom of the screen/content
• 2colsrightnavslickbottomfooter – 2 columns with right nav and footer sticking to the bottom of the screen/content and extra CSS for navigation
• 2colsrightnavstickyfooter – 2 columns with right nav and footer sticking to the bottom of the content
• 3colsbottomfooter – 3 columns – holy grail css – with foter sticking to the bottom of the screen/content
• 3colsslickbottomfooter – 3 columns – holy grail css – with foter sticking to the bottom of the screen/content and extra CSS for navigation
• 3colstickyfooter – 3 columns – holy grail css – with foter sticking to the bottom of the content

Quite a few of them…I didn’t realise until I actually started to write about them.

The following resources were useful in creating the above layouts:

• Layout Gala
• Ryan Fait’s Sticky Footer
• Wonderwebware’s CSS Menu Generator

These layouts are free to use. And if they help you sleep any better, feel free to link back to me or drop me an email .

For those of you looking to get any modifications done, I am happy to do so at a reasonable charge. Feel free to contact me.

I hope you have found the true Holy Grail of CSS here.