Best CSS liquid layout ?

Hi everybody!
I’m looking for a CSS-based liquid layout that will support modern browsers , and by modern I mean : Firefox, IE 6 (no IE 5 ) and especially IE7. I really don’t care about IE5 , since my site’s target (visitors) will most likely not use that.
How it should be like:

• behave exactly the same in all browsers mentioned
• easy to maintain(a man can dream,right?:D)
• be flexible..
• have equal height columns
• ohh...and I almost forgot, I need a 3 column - based layout.

I’ve had some experience with alistapart’s holy grail ,and some others , but I’m bothered by the hacks for IE5 that make my life harder when trying to tweak stuff.

So... can anyone help me with this ?:(

Edit: some clarifications are needed about what I mean when I say I want it to be flexible.
Well,upon reading some usability studies , I’ve decided I will need a center column that can hold the length of about 10-11 words. That means the inner column should adjust itself by em measurements if I’m not mistaking.Also , I would want a em based width for the other 2 columns (left and right) as well.

Do you recommend me to go the em-way ? ( I was thinking of it being the future,since large screens are becoming more and more common , and this would solve some of the issues that would arise).

http://www.positioniseverything.net/articles/onetruelayout/appendix/holygrail

http://www.alistapart.com/articles/multicolumnlayouts/

I was trying to do something very similar here, but adding the sticky footer. As you can see in my examples, the sticky footer has some problems:

http://www.cmssandbox.com/designs/gradients/design1.html
http://www.cmssandbox.com/designs/gradients/design2.html


Anyone knowledgeable in CSS know why I am having the overlap problems with the sticky footer when the content is longer than the viewport?

This is without the sticky footer:

http://www.cmssandbox.com/designs/gradients/design.html

It would seem your left and right column positionning is static, never tried your technique width margin set in % but there is another way using a combination of floats : a float wrapper for left column and center, and the right column floating relatively to the wrapper + negative margins... give this one a look : http://www.positioniseverything.net/piefecta-rigid.html
and also http://alistapart.com/articles/negativemargins

You’ll be able to achieve what you want... the downside is, additionnal divs (wrapper, and div to clear too)

I don’t think the left and right column are static. They are just floated on top of the padding of the center container. Could you elaborate a little more about why it is static? I am a rookie when it comes to CSS, and the method is taken from the "Holy Grail of Layouts." I just tried adding the sticky footer to it, without success :-D

Jesse

I just quickly browse your page with FireBug and saw no position attributes, which by default is "static"

static : Default. An element with position: static always has the position the normal flow of the page gives it (a static element ignores any top, bottom, left, or right declarations)

but my bad, I didn’t give enough attention to the column class which indeed is floating left :

Well consider it fixed. I just needed to add a margin-bottom to the left and right columns that was the size of the footer to get it out of the way. One last thing, how do I make the entire li for the navigation clickable? I have it change on hover, but the links don’t go active unless you are hovering over the text.

EDIT: display:block is what I was looking for.

Well done, now you have to check cross-browser compatibility... off to eat and I’ll go back to check this with Safari

Looks good on the screen capture here:

http://82.51.167.118/safaritest/1175884890-full.jpg

and

http://82.51.167.118/safaritest/1175884995-full.jpg

This is my current favorite multi-col layout since it does not require any browser hacks.

http://www.alistapart.com/articles/multicolumnlayouts/