Search for the Holy Grail of CSS

May 30, 2008 @ 4:54 pm · Filed under Technology

This week, CSS layouts kept me awake into the wee hours almost every single day. I think a bit of background is in order before I go any further here.

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:

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:

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.

[Bloglines] [del.icio.us] [Digg] [Facebook] [Google] [MySpace] [Reddit] [Slashdot] [StumbleUpon] [Technorati] [Email] More »

Comments