Need help! 3 columns - same height - gap between each..

[lisaanne]

Hiya,

I hope someone has an amazing idea/some advice to help me on this!

http://projects.18aproductions.co.uk/3cols/template.php

I've trying to build a page that's got 3 columns.
However, each of the columns needs to be separate from the others, with a border around it. And crucially for something later on in the design, all 3 columns need to be the same height.

The design also has to be dynamic/stretch with the page (width wise). I'm happy for the 3 columns to be a fixed width if needs be (the middle one has to be cos of the image - 500px), but the gaps between each column need to be able to expand.

Any advice gratefully received! I know I could do it with tables, but I really don't want to use them as it's not tabular data.

Thanks!
Lisax

[Paul O'B]

Hi,

I have a some column equal height examples here:

http://www.pmob.co.uk/temp/3col-abso...umns-fluid.htm
http://www.pmob.co.uk/search-this/absolute-columns3.htm

The fluid width version will likely suffer from pixel rounding errors in IE.

You could use the PIE layout but it also has a large number of bugs and is much more complicated than mine.

[lisaanne]

Thanks so much Paul! You haven't got any gems for how to keep the outside 2 columns a fixed width have you?!
So it'd be like 210px - variable - 150px (or something).
So the middle column stretches, but the outside 2 stay the same?

Lisa x

[Dan Schulz]

Well Lisa, the first thing I'd ask is what are going to be in the side columns (and where will the menu be)? I'm asking because I don't throw DIVs around everywhere and then put the HTML I want to use inside it, I just put it where I want it to go (like with menus).

Also, will the side columns be the same background color or will they have to change?

[Paul O'B]

ou haven't got any gems for how to keep the outside 2 columns a fixed width have you?!

That does complicate matters a bit and means I'd have to use a mixture of 2 methods to achieve it.

http://www.pmob.co.uk/temp/3col-abso...luid-fixed.htm

The above uses my original 3 col layout (see sticky thread at top of forum) with the absolute column routine thrown in for good measure.

The above layout is untested as I have just converted the two layouts into one but seems to be working in modern browsers ok. Test thoroughly.