javascript - jQuery compare height not running on reduction of height -

i've got following piece of jquery checking height of left , right side columns. if alert list (left) increases in height, sidebar row increases in height match. however, once has increased, , alert list decreased (by selecting different area or lower number of alerts) sidebar , overall row containing not reduce in height, leaving huge space below.

to replicate issue:
select st helens area.
choose 100 alerts
choose wirral area.
containing height not reduce.

http://178.62.45.247/areas.php

*note, must work ie7 , above *

function areasrowheight() {     $height1 = $('.nopr').height();     $height2 = $('.nopl').height();     if($height1 > $height2) {         $('.areasrow').height($height1);     }     else {         $('.areasrow').height($height2);     } }  $(document).ready(function(){          $( window ).resize(function() {          maxheight('.nopr', '.nopl');     });     $( window).scroll(function(){         maxheight('.nopr', '.nopl');     });     $( window ).on( "orientationchange", function( event ) {         maxheight('.nopr', '.nopl');     });     $('.burgermenu').on('click', function(event){         $(this).css('display', 'none');         $('.cancel').css('display', 'inline-block');         $('.smnav').css('display', 'block');         // $('.burgermenu').attr('class', 'burgermenu-open')                  event.preventdefault();     });     $('.cancel').on('click', function(event){         $(this).css('display', 'none');         $('.burgermenu').css('display', 'inline-block');         $('.smnav').css('display', 'none');         // $('.burgermenu').attr('class', 'burgermenu-open')                  event.preventdefault();     });      $('.show5').on('click', function(event){         hide('.latestalerts ul', 5);         maxheight('.nopr', '.nopl');         $('.areasrow').height('auto');         event.preventdefault();      });      $('.show10').on('click', function(event){         hide('.latestalerts ul', 10);          maxheight('.nopr', '.nopl');         $('.areasrow').height('auto');         event.preventdefault();      });     $('.show100').on('click', function(event){         hide('.latestalerts ul', 50);          maxheight('.nopr', '.nopl');         $('.areasrow').height('auto');         event.preventdefault();      });     $('.showall').on('click', function(event){         resethide();          maxheight('.nopr', '.nopl');         $('.areasrow').height('auto');         event.preventdefault();      });              var trigger = $('.button li a'),     container = $('.latestalerts');           trigger.on('click', function(event){     windowanchor();     event.preventdefault();              var $this = $(this),       target = $this.data('target');       $('#content').load('controllers/areaload/' + target + '.php');            areasrowheight();     });      maxheight('.nopr', '.nopl');  }); 

i have no ie7 if right understand should remove style.css

.areasrow .nopr {     height: 100% !important; } .areasrow .nopl {     height: 100% !important; }  .areasrow .nopr .inner-content {     height: 100% !important; }  .areasrow .nopl .sidebarbg {     height: 100%; } 

then change in main.js

$('#content').load('controllers/areaload/' + target + '.php'); areasrowheight(); 

to

$('#content').load('controllers/areaload/' + target + '.php', function(){   maxheight('.nopr', '.nopl'); }); 

a bit dirty document structure can suggest.