Keep Height of Second Div column same as First Div

Hi,

In responsive web design, I often encounter this issue, and solve it with jQuery. However this time, it was little different took much time to get it right.. So i am posting here for future reference:

<code>

<script>
jQuery(document).ready(function($){
var currentHeight = 0;

$(window).load(function() {
currentHeight = $('#slider').outerHeight();
$('#slider-right').css({'height':currentHeight});
});

$(window).resize(function() {
currentHeight = $('#slider').outerHeight();
$('#slider-right').css({'height':currentHeight});
$(window).trigger('resize');
});

});
</script>
</code>

I had two column layout, with responsive slider at the left, and a div in the right.

As slider keeps changing its height, right div looked bad. So using above code, we can use Jquery which does:

1. Take size of slider (on load as real property in css is not set, and you need to let the page rendered to get the rendered height)

2. Now we have two functions, one changes the height of right div on first page load. And second does the same thing but on every time when window resizes… to keep the height same on every window resize/reload.