Applying this particular css:
.addProblemClass{
width:300px;
height:300px;
/*width:25%;
height:40%;*/
border:solid 1px #000000;
margin: 5px;
background-color:#FFFFFF;
padding:5px;
opacity:0.9;/*For chrome and mozilla*/
filter:alpha(opacity=90);/*For IE*/
}
.boxHeader{
border: solid 1px #000000;
height: 20%;
padding: 5px;
}
.addProblemHeaderTextDiv{
border:solid 1px #FF0000;
width: 80%;
height: 100%;
}
.addProblemHeaderImageDiv{
border:solid 1px #00FF00;
float: left;
width: 20%;
height: 100%;
}
Along with this html snippet:
<div class="addProblemClass">
<div class="boxHeader">
<div class="addProblemHeaderImageDiv"></div>//DIV A
<div class="addProblemHeaderTextDiv"></div>//DIV B
</div>
</div>
The issue arises where DIV A and DIV B appear to be overlapping. Any insights on why this might be happening?