Line up bottom of divs

[tomhumf]

Hi,

I'm working on a 3 column layout. Each column is made up of a top image, sliced middle, and bottom image. They expand when more text is added, or if the font size is increased. This all works fine.

I would like the bottom of each column to line up. Is there some way to set the shorter ones to expand to the length of the longest?
Thanks

[swa66]

Faux columns typically work best for this. Basically you make sure the parent expands to encompass the children, and you set the background on the parent. If needed a sliding windows technique can be used if you have variable width of some columns.

[tomhumf]

thanks i'll give that a go.

[lloydb]

For a really neat approach to keeping all the columns at an equal height, check out The technique by Matthew Jame Taylor [matthewjamestaylor.com] He has posted his solutions to use free of charge but has requested (but not insisted on) a link back. His code will keep the background of all the columns at the same height and you don't need to load an image to do it.

I have been told that these are pretty simple layouts, but I did hit a few problems trying to adjust the widths of columns, probably because I am just beginning to get into css.

<snip>

[edited by: swa66 at 5:29 pm (utc) on Nov. 25, 2008]
[edit reason] fixed URL to be specific, we require authority, not blogs [/edit]

[swa66]

Lloyd,

Interesting technique. It's basically 3 wrappers around the 3 columns that are all floated (so the 3 wrappers do expand to hold their children), and then using relative positioning to shift them sideways and reveal only the part they want to show, and finaly shift the columns themselves back into view.

Of note though is that this means the backgrounds shown will be the rightmost parts of it , with no easy way to e.g. center a background image on the column.

And most importantly it requires the 3 wrappers (2 extra ones), something that mixes layout into the html, and as such should be used with caution.

The calculation of the amount to shift the columns back seems to be a bit complex indeed, esp if you are going to change what would be a bit of padding it'll make you recalculate the entire thing.

And it's actually proving my point in that it's doing backgrounds on wrappers, not on the columns themselves as they won't expand.

Still it's interesting and well explained aside of these obvious points.