Question

I have a div on the main page:

<div id="Alerts" class="Alerts"><a class="handle" href=""></a></div>  

I’m populating this div with others div at run time:

function CreateDivIncident(errorcode, name, address, lat, lng) {  
var div = CreateDefaultDiv('Alerts');  
var html = errorcode + '</b> Name:' + name + ' Address: ' + address;  
div.innerHTML = html;  
google.maps.event.addDomListener(div, 'mouseover', function () { div.style.backgroundColor = '#55FFFF'; });  
google.maps.event.addDomListener(div, 'mouseout', function () { div.style.backgroundColor = 'white'; });  
google.maps.event.addDomListener(div, 'mouseup', function () { gmap.panTo(new google.maps.LatLng(lat, lng)); });  
}

function CreateDefaultDiv(parent) {  
var div = document.createElement('div');  
div.style.marginBottom = '5px';  
div.style.backgroundColor = 'white';  
div.style.border = 'solid 1px';  
div.style.fontSize = "16px";  
div.style.fontFamily = "Arial";  
div.style.paddingRight = "5px";  
document.getElementById(parent).appendChild(div);  
return div;  
}

The new divs are showing and acting to clicks well but the parent div isn’t growing its height correspondingly. The new divs are just “floating” above it.

What am I missing here? Any advice will be welcome.

Answer 1

Write float:left css rule on .Alerts or #Alerts. Parent container will take the height and width. By using border:1px solid red; on your parent div and child divs you do testing, i mean which element is outside and which one is inside. By identifying the boundaries.

Update: Remove the height 110px;