I need to adjust the height of three column divs so that they are all equal. Initially, I was able to achieve this using a function found on SO (apologies for not being able to provide attribution at this time, will update if possible):
function resizeIt()
{
var largest = 0;
$(".feature").each(function(){
var findHeight = $(this).height();
if(findHeight > largest){
largest = findHeight;
}
});
$(".feature").css({"height":largest+"px"});
}
This worked well, but now I want the divs to resize whenever the window is resized. So I made modifications to the function and called it both on page load and window resize. Here is the updated function along with the call for window resize:
function resizeIt()
{
$(".feature").css({"height: auto"});
var largest = 0;
$(".feature").each(function(){
var findHeight = $(this).height();
if(findHeight > largest){
largest = findHeight;
}
});
$(".feature").css({"height":largest+"px"});
}
resizeIt();
$(window).resize(function(){
resizeIt();
});
Now, the divs are not resizing correctly on page load or window resize. Nothing happens at all. When I include the line
$(".feature").css({"height: auto"});
In my function, the code breaks. Despite the object being present when called in the first line, it seems like there is an issue. Any insights on why this line is causing problems?