Detecting height of div and dynamically resize

Detecting height of div and dynamically resize

i have two 50/50 boxes. Left box has textual content inside and the right side of the box has a map inside. When i resize the browser down the height is matched perfectly using a bit of jquery. But when i resize the browser back up to a bigger size, jquery doesn't update the css height. The code i manage to put together based on what i have read on the net is as follows.

An example is here  http://217.199.187.191/scalegillfoot.com/ look very bottom where map and surrounding area is. Resizing the browser equals the height but when you make browser window bigger it doesn't update

any help appreciated

  2. function setboxHeight() {
  3. var SurroundingAreaHeight = $('.SurroundingArea').height();
  4. $('.SurroundingAreaMap').css('min-height' , SurroundingAreaHeight);
  5. }
  6. setboxHeight();
  7. $(window).resize(function() {
  8. setboxHeight();
  9. });