Trying equal height columns with Jquery on fluid layout - text overflow. :(

Issue

I'm aware of a lot of css nice solutions etc... short being told, I wish this to work, regarding if I have padding, margin, no extra markup, shadows, background colors... so... I'm just looking for a jquery version of it.

Found some on SO. Trying to apply. Seems to work almost. When you narrow the window, text overlaps. If you disable the js, it doesn't.

http://jsfiddle.net/ApUYv/4/

Two questions:

1) How can we avoid the text from overlapping ?

2) Should we use document.ready or window.load ?

Please note that: overflow: auto; may not be an option, because no scroll bar is desirable by the designer. :(

Solution

Not sure, whether this is, what you were looking for. But I changed your javascript code to re-adjust the the columns height on window resize: http://jsfiddle.net/ApUYv/6/

function resetHeight() {
   var maxHeight = 0;
   $(".equal-height").height("auto").each(function(){ 
       maxHeight = $(this).height() > maxHeight ? $(this).height() : maxHeight; 
   }).height(maxHeight);
}
resetHeight();
// reset height on resize of the window:
$(window).resize(function() { 
    resetHeight();
});

To resize the columns when resizing the window, you want to use a callback on $(window).resize(), therefor I've encapsulated your code into a function resetHeight.

Then, you'll want to recalculate the maxHeight on every call of this function and to do that correctly, you need to reset the height of each div to auto temporarily, so that any previous settings won't mess up your .each() loop. Also, you need to reset the varaible maxheight to 0 each time, because the previous value is still in it.

Is that what you wanted?

Answered By - ditscheri