PDA

View Full Version : Three div to expand with each other


tony09uk
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.

gentleone
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.

DWcourse
03-19-2011, 02:07 AM
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

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.

tony09uk
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

DWcourse
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ů

tony09uk
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?

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

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