Hi,
Below is some HTML that we are using and running in IE using the inspect element facility.
If you select the contentheaderleft div and then switch off the position absolute setting the "Widget" element changes size and the div underneath changes position. We cannot understand why this is the case. Why does the element resize?
Thanks
Ian
*******************************************************************************************
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0"/>
<title>Charts</title>
<style>
body{
width: 100%;
height: 100%;
margin: 0px auto;
padding:0;
background-color: blue;
}
h3{
margin: .5em;
color: black;
}
.container { width:98%;margin:1%;height: 98%; }
.containerTop { width:100%; height: auto; }
.containerBottom { width:100%;margin-height: auto; }
.contentheaderleft { width:20%;float:left;height:40px;border:1px solid #ddd;color:#666;background-color: yellow; }
.contentheaderright {
width:77%;margin-height: 40px;
border:1px solid #ddd;color:#666; background-color: red;
}
.contentdetailleft { width:20%;float:left;height: 89%;border: 1px solid #ddd; background-color: #fbf9ee; }
.contentdetailright { width:77%;float:left;margin-height: 89%;
border: 1px solid #ddd; background-color: #fbf9ee; }
</style>
</head>
<body>
<label id="spn" style="display:none"></label>
<label id="spnstring" style="display:none"></label>
<div class="container">
<div class="containerTop">
<div class="contentheaderleft">
<h3 align="center">Widget</h3>
</div>
<div class="contentheaderright">
<h3 align="center">Drop Your Widget Here</h3>
</div>
</div>
<div class="containerBottom">
<div id="leftdiv" class="contentdetailleft">
</div>
<div class="contentdetailright" id="rightsec">
</div>
</div>
</div>
</body>
</html>