html - Modifiying Jquery to reset as browser window is to be re-size -

i have responsive layout similar divs , applying jquery divs match height of 1 more content. however, if browser window re-size divs remain same heigh when page loaded making text go out of div. there way somehow continue running jquery everytime user resize browser window?

to more descriptive of i'm trying acomplish have divs behave (on browser window rezise)as normal div text content , attributes width: #%; height: auto; difference divs match height of 1 bigger height.

here link of have: http://as.sjsu.edu/cf/vaishak/equalizetest/index.html

here jquery have max height:

<script> jquery(function(){ var maxheight = 0; $(".box").each(function(){    if ($(this).height() > maxheight) { maxheight = $(this).height(); } }); $(".box").height(maxheight); }); </script> 

here updated version still doesn't work when window resize.

$(document).ready(function(){     $(window).resize(function(event) {         resizediv();     });     $(document).ready(function(){         resizediv();     });     function resizediv(){         var maxheight = 0;         $(".box").each(function(){            if ($(this).height() > maxheight) { maxheight = $(this).height(); }         });         $(".box").height(maxheight);     }     }); 

any appreciated!

you forget using javascript , use pure css:

http://cssdeck.com/labs/ygq5x6k3

<div class="container">     <div>first</div>     <div>second</div> </div>  .container {     display: table; /* optional */     width: 100%; /* optional */ }  .container div {     display: table-cell; } 

its flexible , works many "columns" need. since pure css, can disable mobile devices via media queries.