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.

equalizediv1

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.

equalizediv2

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.

6 thoughts on “A Different Way of Equalizing Div Heights”

  1. Zzzzz borring.

    new macbooks. mmmm…

    whats ur opinion on the (old) Nokia N80?

    remember when you compared a cell collection to a shoe collection? yeah.

  2. Well I can’t even begin to comment….it’s not only a little over my head. I hope you’re happy with your divs:P and take a little time off sometime to say hi to an old friend 😉

  3. Justin: New Macbooks are useless, business laptops are where it’s at… I’ve decided (mostly) to either go for the Dell Latitude D630 or *gasp* a Thinkpad T61.

    Nick: Yeah, I intend to. I’ve been swamped with work recently. I didn’t walk out of the office until 6:40pm today… I got a new project at 5, just as I was about to start heading out. Oh well.

  4. Thanks for this, I know it’s nothing recent but it helped when you hit me in the face with what hit you in the face. I try to keep images to a minimum, but I think if I want to be able to change the background colour between two white panels (an 11px margin separates them down the middle of the page) then I can make that area transparent and the container div have a transparent background. Sure, I’ll be stuck with white panels, but that’s what I wanted! Sorry for thinking aloud, I’ll let you get back to being Canadian. Thanks again!

Leave a Reply

Your email address will not be published. Required fields are marked *