If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Equal Height Columns

I've found many solutions for this by attached a unique ID to the divs that you want to make equal height (relative to the one that has the most content), but I have a special case. I have a single div that dynamically loads multiple [indefinite] times, so it has the same ID. The issue, as with the simpler cases, is that sometimes the content that loads into the div is more or less than the others next to it - so, for example, when I have a 3x3 grid of divs (which would be even if they had fixed heights) the grid is thrown off and I'm left with some divs skipping rows.

There's a form that allows you to store address information, but not all fields are required. When 5 of the 5 fields are filled out for 9 records, the 3x3 div layout is very square. However, when, say, the #3 of 9 only has 3 of 5 fields filled in and stores the record it throws off the alignment of the divs #4-9.

The div that encapsulates the address info is written as a single instance in the code which repeats depending on how many records you have. What I would like to do is have all 9 (or however many records are stored and displayed) be the same height regardless of their content. I assume this could be done by determining the height of the tallest of the 9 and setting the rest to the same height. However, I haven't found a solution for this being that the divs that will have their height adjusted load in dynamically from one instance (so they all have the same ID on the encapsulating div).

Unfortunately it doesn't, but thank you for suggesting it. That one isn't exactly equal columns but rather a background image that creates the color that extends the height of the column with the most content.

What I need is a solution where the divs are free-floating (floating left with margins on each to separate them and a fixed width to determine how many columns there will be) without any unique identifiers (the class/id on each will be the same). So the JS (I don't believe it can be done with CSS alone) needs to determine the height of the tallest of them and set that height on the rest (or something or the sort).