0

Here is a challenge!

I am using GetSkeleton at the moment and have 3 basic columns

<div class="container">
    <div class="one-third column box1">
    Some text<br/>
    </div>
    <div class="one-third column box2">
    Some text
    </div>
    <div class="one-third column box3">
    Some text<br/>
    Some text<br/>
    Some text<br/>
    Some text<br/>
    </div>
</div>

As you will notice, there is more content in box 3. How can i make it so that box 1 and box 2 are aligned to the bottom - but with respect to keeping it responsive.

John
  • 200
  • 1
  • 1
  • 6

1 Answers1

0

Not for sure if you found a solution to this and I am assuming you wanting "Box1 and 2" to be equal height with "Box 3. I use an Equal Heights Plugin, that will keep track of my tallest div and resize the ones next to it accordingly.

Here it is:

(function($) {
$.fn.equalHeights = function(minHeight, maxHeight) {
    tallest = (minHeight) ? minHeight : 0;
    this.each(function() {
        if($(this).height() > tallest) {
            tallest = $(this).height();
        }
    });
    if((maxHeight) && tallest > maxHeight) tallest = maxHeight;
    return this.each(function() {
        $(this).height(tallest).css("overflow","auto");
    });
}

})(jQuery);

And then call it with this:

$(".box").equalHeights(250);

Basically what happens here is you are setting a class box to your divs (for me "box" is what I use for all of my box divs. Then I look and see what the min-height would be and set it to that. Wallah! equal height boxes.

Hope this helps.

CodeWeaver
  • 13
  • 5