IE appendChild parent div height

So I am trying to add a section to a div using createElement and appendChild. And its working great in every browser except in IE(surprise) because the parent element is not adjusting to the correct height. Whats funny is it works perfectly fine in IE8's compatibility mode but IE8 without compatibility mode on just seems to add it without changing the parent height, adding it as if its position were absolute even thought its not. There is no height set for the parent div.

I have like so <div id="guestArea"></div>

and

<script type="text/javascript">
var numGuest = 0;
function addGuest(){
  var guestSection = document.getElementById("guestArea");
  numGuest++;
  var newGuestDiv = document.createElement("div");
  newGuestDiv.innerHTML = '<span style="font-weight: bold; font-size: 14px;"> Guest #' +  numGuest + ':</span><br />First name:<br /><input type="text" name="guestFirstName[]" /><br />Last name:<br /><input type="text" name="guestLastName[]" /><br /><br /><div style="padding-left: 5px; border-left: 2px #aeaeae dotted;">Friday:<br /><input type="checkbox" value="1" name="guestAlbanyRec[]" id="guest' + numGuest + 'AlbanyRec" /> <label for="guest' + numGuest + 'AlbanyRec">8:00 PM Albany Reception</label><br /><br />Saturday:<br /><input type="checkbox" value="1" name="guestLunch[]" id="guest' + numGuest + 'Lunch" /> <label for="guest' + numGuest + 'Lunch">12:00 PM Catered lunch & house tours ($10/person)</label><br /><input type="checkbox" value="1" name="guestCampus[]" id="guest' + numGuest + 'Campus" /> <label for="guest' + numGuest + 'Campus">1:00 PM Campus tours & guestni v. active sports</label><br /><input type="checkbox" value="1" name="guestDinner[]" id="guest' + numGuest + 'Dinner" /> <label for="guest' + numGuest + 'Dinner">5:00 PM Dinner dance ($85/person). If attending please check food choice below.</label><br /><input type="radio" value="beef" name="guestChoice[]" id="guest' + numGuest + 'Choice1" /> <label for="guest' + numGuest + 'Choice1">Beef</label> <input type="radio" value="chicken" name="guestChoice[]" id="guest' + numGuest + 'Choice2" /> <label for="guest' + numGuest + 'Choice2">Chicken</label> <input type="radio" value="fish" name="guestChoice[]" id="guest' + numGuest + 'Choice3" /> <label for="guest' + numGuest + 'Choice3">Fish</label> <input type="radio" value="veg开发者_JAVA技巧e" name="guestChoice[]" id="guest' + numGuest + 'Choice4" /> <label for="guest' + numGuest + 'Choice4">Vegetarian</label><br /><br />Sunday:<br /><input type="checkbox" value="1" name="guestBrunch[]" id="guest' + numGuest + 'Brunch" /> <label for="guest' + numGuest + 'Brunch">11:00 AM Brunch ($5/person)</label><br /></div><br />';
  //Must append child other wise inputs get reset
  guestSection.appendChild(newGuestDiv);
}
</script>

Thanks in advance for any help.

---

This might help...

  var newGuestDiv = '<span style="font-weight: bold; font-size: 14px;"> Guest #' +  numGuest + ':</span><br />First name:<br /><input type="text" name="guestFirstName[]" /><br />Last name:<br /><input type="text" name="guestLastName[]" /><br /><br /><div style="padding-left: 5px; border-left: 2px #aeaeae dotted;">Friday:<br /><input type="checkbox" value="1" name="guestAlbanyRec[]" id="guest' + numGuest + 'AlbanyRec" /> <label for="guest' + numGuest + 'AlbanyRec">8:00 PM Albany Reception</label><br /><br />Saturday:<br /><input type="checkbox" value="1" name="guestLunch[]" id="guest' + numGuest + 'Lunch" /> <label for="guest' + numGuest + 'Lunch">12:00 PM Catered lunch & house tours ($10/person)</label><br /><input type="checkbox" value="1" name="guestCampus[]" id="guest' + numGuest + 'Campus" /> <label for="guest' + numGuest + 'Campus">1:00 PM Campus tours & guestni v. active sports</label><br /><input type="checkbox" value="1" name="guestDinner[]" id="guest' + numGuest + 'Dinner" /> <label for="guest' + numGuest + 'Dinner">5:00 PM Dinner dance ($85/person). If attending please check food choice below.</label><br /><input type="radio" value="beef" name="guestChoice[]" id="guest' + numGuest + 'Choice1" /> <label for="guest' + numGuest + 'Choice1">Beef</label> <input type="radio" value="chicken" name="guestChoice[]" id="guest' + numGuest + 'Choice2" /> <label for="guest' + numGuest + 'Choice2">Chicken</label> <input type="radio" value="fish" name="guestChoice[]" id="guest' + numGuest + 'Choice3" /> <label for="guest' + numGuest + 'Choice3">Fish</label> <input type="radio" value="vege" name="guestChoice[]" id="guest' + numGuest + 'Choice4" /> <label for="guest' + numGuest + 'Choice4">Vegetarian</label><br /><br />Sunday:<br /><input type="checkbox" value="1" name="guestBrunch[]" id="guest' + numGuest + 'Brunch" /> <label for="guest' + numGuest + 'Brunch">11:00 AM Brunch ($5/person)</label><br /></div><br />';
  var range = document.createRange();
  var fragmentToInsert = range.createContextualFragment(newGuestDiv);
  document.getElementById('guestArea').appendChild(fragmentToInsert);