3 column templates

gary.newelluk · Posted: Sat May 21, 2005 1:57 pm 3 column templates

Ok so here it is......

I designed a great template using pure CSS and strict DTD and it works a treat on all the major browsers except my old adversary Firefox....

I have tried other peoples so called liquid CSS templates and they are all flawed leaving me to believe that tables really are the only way to go if you want a 3 column display on firefox.

I have tried all the major websites that use 3 columns and they all use tables.

Can anyone really recommend a 3 column liquid template using pure CSS?

I have searched google and a lot of the template sites and have only found flawed designs.

Corey Bryant · Posted: Sat May 21, 2005 2:11 pm

You might try the guys and gals over at International Web Developers Network

degsy · Joined: 23 Feb 2005 Posts: 2440 Location: North East, UK

I've had no probalem using three columns in Firefox

http://www.degs.co.uk/test/css/cssLayout/3column.htm

gary.newelluk · Posted: Sat May 28, 2005 2:08 pm

A fluid template can have all three columns the same size as you would get from a table layout.

Therefore the left menu bar would always be the height of the middle and right hand column.

Similarly each can have independant colours, text, images etc.

Your template does indeed work on Firefox Degsy but the left menu bar and right column are independant from the centre meaning that the heights of each column will be different thereby not making it a truly fluid 3 column template.

I can get 2 columns to work easily but 3 columns, bit of a challenge and I still use tables for a 3 column template whereby all 3 columns need to be the same height. (Usually for Magazine style layouts where there is a border around the whole template and margins around the outside).

I think this is why all templates for popular CMS systems such as mambo and postnuke use tables as opposed to CSS.

Feel free to prove me wrong, I'd love to know the answer to this conundrum.

jchris · Joined: 15 Aug 2005 Posts: 1

http://mfdz.com

this took a while to work out, but css is pretty happy to help here. the trick is using percentage widths for the columns, and leaving enough leftover percentage so that margin and padding can add up and still not cause one of the columns to slide down.

<a href="http://mfdz.com/jchris">Chris</a>