View Full Version : Three div to expand with each other

03-18-2011, 05:08 PM
I have three <content> Divs, all with the same settings (apart from the background image within them) next to each other on the page,and one div <footer> below them all set within a <container> div.

I have the div's height set to auto, but each one has a different amount of content in it, consequently they are all at different lengths.
Is it possible to set them all expand depending on the length of the longest one?

I'm trying to avoid changing a set height each time I add or remove content to one of them.

03-18-2011, 07:33 PM
Google for 'equal height columns'.

There are different ways to accomplish what you want and each has its pros and cons. It also depends on what kind of positioned elements you're going to put in those columns.

03-19-2011, 02:07 AM

It's a bit complex. A simple faux-solution is to place your three (transparent) divs in a wrapper div that has a 3-col graphic that repeats in the y direction. That way the background image makes it look like you have 3 equal length columns.

03-19-2011, 09:48 AM
Thanks dude, I just found that just before I logged onto here. I will be giving it a try as that suits excatly what I want, If not, I will be going with your suggestion. Thanks

03-19-2011, 05:17 PM
I don't know if you're using Dreamweaver but my template here : http://www.dwcourse.com/dreamweaver/free-template-july4.php uses the 3 column technique described in that article. I admit the template is a bit gaudy butů

03-19-2011, 08:20 PM
I managed to create the auto expand column's, but is it possible to put or simulate a space between each?

03-19-2011, 08:55 PM
with that technique, I don't see how you'd do it.

03-20-2011, 06:17 PM
I guessed so, Just thought i'd ask the experts thought :D