100% <div> Height of container

[mp04]

Hey,
First off I know there was a topic similar to this one, but it did not help me answer my question, so I decided to post it after trying to search the net though google.

I have a container with no pre-set height. inside that container I have a total of 5 <div>s (so 5 columns) now what I want it to do is take the height of the longest <div> and make all the other <div>s inside that container the same height. Make sense?

I hope it makes sense. If not, let me know and I can post a image.

Any help us appreciated.

Thanks in advance!

[Tristantio]

I just made a post on this for 2 columns here:
[webmasterworld.com...]

For your 5 column one just do that for each column.

Assign padding to some huge number that will surpass any of your page's content and then assign a negative margin that is equal to that padding.

Set your wrap to hide overflow on the Y.

In addition to whatever you already have for each item add where appropriate:

#wrap {
overflow-y:hidden;
}

#columnX {
padding-bottom:3000px;
margin-bottom:-3000px;
}

[mp04]

Tristantio,
Thanks, This seems to be doing the trick, but caused problem.

See I have a container inside of a container and by adding "overflow-y:hidden;" to the container settings, it just that one container to the right.

any thoughts on this?

[mp04]

Hey, I actually got it fixed... quite simple really...

Stupid User Error was the problem. lol. I was previewing it in live mode in dreamweaver, that's why it was be all messed up, but when i do preview in browser, it works perfectly.

sorry and Thank you!

[swa66]

The more traditional approach is to use "faux columns": set a background on the parent of the columns, not on the columns themselves.

The bottom padding; negative botom margin; overflow-y (which is CSS3, so it'll make your code invalid to CSS2.1 checkers) might not be so well supported in all browsers. I'd like to see a list of browsers where the trick works. I remember doing something somewhat similar and having opera throw a fit over my code.
Anyway, there is a "big" caveat: your difference in column length is now limited to a fixed value in the CSS (3000px in the example), if you're a template maker that might be unusable as one can hardly predict maximum lengths.

[mp04]

Thanks swa66. Your idea worked to perfection. I was worried about setting the length to 3000px or what I thought would be enough, but with this method, its much easier.

But thank you to Tristantio too for his/her input.

I do appreciate both solutions.

Thanks Again!

[swa66]

faux columns really isn't my idea, it's been around longer than that I took a deep look at CSS.