function resize()
{
/*
Var creates variable, 
elem_... the name we create for the variable, 
document.getElementById assigns the id name in the () to the variable that we just created this information is pulled from the page
*/

  var elem_main_content = document.getElementById('main_content');
  var elem_main_container = document.getElementById('main_container');

/*
Var h gets assigned the height of the vairable "elem_main_content" (which is really the main_content div) 
this needs to be the div that has the dynamic content in it.
*/
  var h = elem_main_content.offsetHeight;

/*
This next part does a test to see if the div is too small and if it is less than the if(h < ...) tag it resizes
it to make it the value set between the {}
*/ 

  if(h < 400) 
  {
    h = 400;
  }

/*
Var Top Creates another variable "top"
offsetTop finds the distance from the top of its parent div.
+ h adds the distance from the top to the height of the dynamic div and assigns this numeber to "top"
this lets us find the location of the bottom of the dynamic div.
*/

  var top = elem_main_content.offsetTop +  h;
  
/*
This references the variable that represents the div we want to change the height of "elem_main_container"
.style.height is an inline style to say that the atribute will will be changing about this div is the height
= says that the height of the elem_main_container is going to be assigned the value of "top" - 
*/

  elem_main_container.style.height = top + 30 +"px";

}




/*Trying to comment out this stuff
  elem_footer.style.top = top + 8;
  elem_atibox.style.top = top - elem_atibox.offsetHeight;
  elem_leftblue.style.height = top - elem_leftblue.offsetTop;
  elem_leftbottom.style.top = top + 8;
  elem_leftbottom2.style.top = top + elem_leftbottom.offsetHeight; 
*/