Hello-

I'm working on a site where I need 3 small columns of equal height. I really would like to do this using CSS but I'm having a lot of trouble. Here's my site so far: http://carterdea.com/clients/thedeangelisgroup

Look at the bottom 3 uneven columns and you'll see what I'm trying to do.

I'm fed up and almost willing to use tables to get the look I want!

Thanks for your help

Carter

Ok, the easiest way to beat this type of problem is to use the faux columns method. Seriously, it will save your sanity. Make a background image for #bottom that consists of the white background with the gray lines separating the boxes. Repeat it vertically, it only has to be a couple of pixels high to work. Then put a 1 pixel gray border on the top and bottom of the #bottom box and you'll be all set - no hair-pulling

Well if you don't mind using a bit of js to sort it.

http://www.candsdesign.co.uk/article...eight-columns/

Ok, the easiest way to beat this type of problem is to use the faux columns method.

I agree. This is what I do almost every time.

Oh yes! I remember reading about this in ALA.

Now I did the faux columns, but my floats made a background image impossible. I took out the floats, but now how should I make these columns next to each other w/o floats?

Thanks,

Carter

Why don't you make part of the "column" image transparent so that you can put a background behind it? You seem to have a simple enough image there that you could use a transparent GIF, which will work in all of the browsers.
P.S. I'm not sure why you can't use floats, they seem appropriate for this situation.

Oh. Wow. I got it. I'm stupid. I'm sorry.

Now, wayfarer07, what are you trying to say? I'm sorry but I'm not totally understanding it.

Never mind, I think I misunderstood what you were trying to do. I thought you wanted another background that would show through the columns.

I would STRONGLY recommend chrishirst's tutorial.

I works HELL great!

Oh, I just checked my site in IE 7 and it looked wonky! Any suggestions?

Originally Posted by carterdea

Oh, I just checked my site in IE 7 and it looked wonky! Any suggestions?

post #3 bro, it won't bite you...

That layout is simple enough that I see no real reason to use JS. As for what's wrong in IE7, I'll have to go fire up my laptop to see it and get back to you.

Originally Posted by Gjore.S

post #3 bro, it won't bite you...

I'll use it if I can't figure this out, but considering I have no experience w/ javascript, I'd very much like to do it in CSS.

No need for JS. IE7 still suffers from it's hasLayout nonsense. All you need to do is put a height: 1%; on #bottom and the #bottom div will stretch properly. You should use a conditional comment to target a separate CSS file for this hack - aka "the Holly Hack".

Thanks. That's perfect.