CSS Overlapping divs

With this 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%;
}

and this html

<div class="addProblemClass">
            <div class="boxHeader">
                <div class="addProblemHeaderImageDiv"></div>//DIV A
                <div class="addProblemHeaderTextDiv"></div>//DIV B
 开发者_开发技巧           </div>
        </div>

why DIV A and DIV B are overllaping?

Use

float: left;

to addProblemHeaderTextDiv class

.addProblemHeaderTextDiv{
    border:solid 1px #FF0000;
    width: 80%;
    float: left;
    height: 100%;
}

Edit

Why it is shown in two rows?

Since you are specifying the width as 20% and 80% they will fill up the entire space. You are also setting the border, so it won't fit in the 100% space. You can either reduce the width of any div or remove the border.

You cant do this because of the CSS Box model.. it adds the 1px border like this

20% + 80% = 100% width + 1px border 

This could work, by subtracting the border again with margin. Else you must use more markup i am afraid.

.addProblemHeaderTextDiv{
    border:solid 1px #FF0000;
    width: 80%;
    margin: 0 -1px;
    height: 100%;
    float: left;

}

.addProblemHeaderImageDiv{
    border:solid 1px #00FF00;
    margin: 0 -1px;
    float: left;
    width: 20%;
    height: 100%;
}