1

I have some columns (divs) which I want to be the same height all the time.

I'm using Zurb Foundation so the layout is like this, and I can't put divs within others to stretch them.

<div class="row equalheight">
    <div class="three columns"> ... </div>
    <div class="three columns"> ... </div>
    <div class="three columns"> ... </div>
    <div class="three columns"> ... </div>
</div>

It probably isn't going to be easy with CSS, but how can I make all columns automagically equal the same height?

Managed to fix this using jquery, solution below.

Adam K Dean
  • 7,387
  • 10
  • 47
  • 68
  • 1
    Won't this throw off the responsive nature of foundation? – Jack Feb 19 '13 at 21:15
  • Good point, I need a way to disable this when the size passes the breakpoint. – Adam K Dean Feb 19 '13 at 21:18
  • For what it is worth - I don't know if I see the jQuery answer as posted as an acceptable one. What if a user has JS disabled? Just seems like a pure CSS method is the "right" answer while jQuery is the easiest way to do it. – JM4 Sep 05 '13 at 20:20

3 Answers3

2

Managed to come up with the answer myself after having a eureka! moment, and thought I'd share for the good of the community.

I used to loop through each of the children of an element, save the highest size in a variable, and then set that size to all of the children elements.

I bound the function to the window load and resize events.

<script>
function equalheight() {    
    $('.equalheight').each(function(index) {
        var maxHeight = 0;
        $(this).children().each(function(index) {
            if($(this).height() > maxHeight) 
                maxHeight = $(this).height();
        });
        $(this).children().height(maxHeight);
    });    
}

$(window).bind("load", equalheight);
$(window).bind("resize", equalheight);
</script>

Works perfect!

Adam K Dean
  • 7,387
  • 10
  • 47
  • 68
0

Check out the following website:

http://css-tricks.com/fluid-width-equal-height-columns/

James
  • 2,013
  • 3
  • 18
  • 31
  • 1
    I saw this link, it was too fiddly to use with foundation, required either faking the columns using backgrounds, or changing the structure too much. – Adam K Dean Feb 19 '13 at 21:21
  • 1
    Ah ok. I generally find that css-tricks is a good website for stuff that works. I'm about to fall asleep so hopefully someone else will come up with an answer that's a bit shorter! good luck! – James Feb 19 '13 at 21:22
  • @AdamKDean this is why its a really good idea to show what you've seen/tried as part of your question: so you don't get answers containing things you've already seen/tried. – cimmanon Feb 19 '13 at 21:41
  • Apologies @cimmanon, I was about to submit my question when I had an idea, and managed to get it to work. Rather than abandoning the question, I thought I'd post it and answer it at the same time, in case it could help someone else in the future. Hence why I didn't mention what I'd already tried. – Adam K Dean Feb 19 '13 at 23:03
  • @AdamKDean Considering how frequently equal height columns comes up on SO, you could have done everyone a big favor and just abandoned your question. See all the related questions `----->` – cimmanon Feb 19 '13 at 23:47
0

Without modifying the markup, this would be the simplest way to go about creating equal height columns:

http://jsfiddle.net/Nu5KN/

div.equalheight {
    display: table;
    width: 100%; /* optional */
}

div.equalheight .columns {
    display: table-cell;
}
cimmanon
  • 67,211
  • 17
  • 165
  • 171