CSS Liquid Layout

Ever since I could stop worrying coding for Netscape 4 I thought standards had finally won and it was all downhill from here but recently I've changed from doing table layouts to CSS layouts and once again I felt I was back in the Netscape 4 era. I suddenly had to worry about IE and Opera quirks. I would get a layout working perfectly then someone would report it was broken in this or that browser.

If my design called for absolute positioning and fixed width DIVs there would be little problems but I need relative positioning and dynamic widths and heights … I need it to be "liquid", "stretch", "flexible".

I tested my site using Browser Cam and Site Vista and discovered many different problems for example content overflowing my DIVs or DIVs not floating where I wanted them to.

So I searched Google and I found many articles on CSS Liquid Layout. Here are some interesting links I found.

Jello - half way between liquid and solid
Fixed vs Liquid - about.com
Tables to CSS - designer journey
3 column layout - tutorial
Liquid Layout - step by step
Sample Layouts - with no hacks
Liquid Layout - the easy way

There was the "be nice of opera hack", the Tantek Celik hack, the IE hack and so many others. The problem is when new browsers come out, it may break my page and I'll need new hacks.

At first I wanted some wizard that would generate my DIVs and CSS for me but then I would have to re-do my page everything a new hack was needed.

What I really need is a server-side technology that would browser sniff and know all of the hacks and generate my CSS for me based on my DIVs.

If you are considering changing from table layouts to CSS layouts I highly recommend it. But let me warn you that the transition can be painful. I had many failed attempts before I finally set my mind to succeed and at some point I saw the light and realized that CSS layouts ...

1. Simplify my HTML
2. Separate layout from markup
3. Give me more control and power - I can do things in CSS I cannot do with tables

Your HTML can organized like this.

<div id="header">header</div>
<div id="menu">menu</div>
<div id="content">content</div>
<div id="sub-section">sub-section</div>
<div id="footer">footer</div>

For more control you can even nest DIVs.

You can find some CSS Layout Wizards for example

http://www.davidbisset.com/?p=690
http://www.inknoise.com/experimental/layoutomatic.php
http://www.csscreator.com/version2/pagelayout.php
http://www.fu2k.org/alex/css/onetruelayout/example/interactive

But they are very basic and therefore have major limitations.

Here is a nice collection of CSS Layouts to use.

http://www.intensivstation.ch/en/templates/

But believe me when I say that I've tried these and nothing works in my case. I posted a project on Guru for a CSS Liquid Layout expert. The bids I'm getting are in the $200 range. This includes tutoring me on CSS Layout.

Maybe ASP.NET 3.0 will have control that auto generates CSS Layout based on the browser because I don't want to spend my time chasing down hacks. I'd rather someone else perfect it and I just use. Isn't that how it's supposed to work? One person invents the wheel and everyone else uses it.