Simple CSS three column layout?

[TechnoScream]

Hi guys

I already know HTML so im tyring to get my head around CSS. I would like to produced a simple 3 column layout but looking around the net it seems as though its not that easy using CSS? I would like it to:

be flexable to fit varying resolutions
work in most browsers without using too many hacks
Have a header and a footer
same height columns
...i dont think im asking much? i could do this with a table in 2 mins...

Looking around the net, it seems that three columns is awkward, needs lots of hacks to make it work in various browsers... is there a simple solution that i havent come across yet? There doesnt seem a lot of point using a CSS layout if its not going to be accessable..

Thanks in advance for any advice suggestions!

p.s this is not to be used on a site/needed for work etc, its just a learning exercise for myself.

 

[D4VE]

Hi,

Its quite easy to make a fluid 3 col layout, where the central column is fluid. There is an example here:

http://www.glish.com/css/7.asp

Note, hacks are used, but only because borders are used. If you dont use borders then it becomes far simpler.

If you need all the columns to be fluid the check out this template:
http://www.davereederdesign.com/work/web/fluidity.com/index.htm

Note: You can simulate all the columns being equal by using http://www.alistapart.com/articles/fauxcolumns/ to produce "faux columns" which is the easiest way of producing equal length columns.

 

[punky_munky]

http://www.inknoise.com/experimental/layoutomatic.php

 

[Beansprout]

See here: http://pmob.co.uk/

 

[blade007]

check out oswd. I learned a lot from there. And they've got loads of templates you can download, dissect, and use.

 

[Augmented]

Have a look at the "Holy Grail Layout"; it's a very good solution to a three-columns structure. Head down to the bottom of the article for the implementation of equal-height columns.