A Different Way of Equalizing Div Heights

I’m deep in the coding process of a new, hopefully soon to be completed (I’m thinking a month or so?), design for this site and I ran into one major problem: equalizing div heights. Or more specifically, how can I make the heights of two adjacent divs the same so that the background colors will extend to the length of the longer div? I did countless searches on the web, finding hackish ways of doing it with CSS (which work only in certain cases/browsers) and the more common way of using Javascript. However, I’d prefer avoiding the use of Javascript unless it is absolutely necessary. And something in the back of my mind was telling me there should be another way.

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.


My first attempts involved two completely separate divs. That’s where the problem was. There was no relationship between the two, and hence the only solution was to use Javascript to dynamically adjust the height to the longest div.


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.