And this morning it hit me in the face. It’s been staring at me this whole time, but for some reason I hadn’t thought of it. All along, I had tried to use the background-color property, with a different color for each div. Instead, I’ve now created a wrapper div, assigned it a background-image, that mimics the colors for the background of the original two divs. Then place two divs inside the wrapper div, with one floated to the left and the other to the right (or something else, depending on how many columns you need). As the internal divs expand, it will push the wrapper div, and hence create the ‘illusion’ that the two divs are expanding at the same rate, regardless if one is actually longer than the other.
I’ve created a couple simple diagrams to demonstrate what I was attempting to do before and what the solution I presented above does.
Here I realized that I could create a wrapper div (shown outlined in red) that contained the two divs I wanted to be the same height. Setting the background-image property on the wrapper div to the appropriate image, I’m able to create the illusion of two equally sized divs.
Of course, there are also limitations to this solution. Since you must specify a background-image, it becomes very difficult to use with non-fixed width designs. Additionally, you’ll need to use an image, which mean some extra data to the downloaded (should be fairly minimal, assuming you just create a slice and repeat it for the length of the div) and an extra HTTP request. Obviously, this only works if you’re okay with creating the ‘illusion’ that the div heights are the same. In reality, it’s the wrapper class with the background-image that does all the work. The divs themselves will only expand to fit the content within them.