CSS divs Chevauchement

Question

Avec cette 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%; 
} 

et ce html

<div class="addProblemClass"> 
      <div class="boxHeader"> 
       <div class="addProblemHeaderImageDiv"></div>//DIV A 
       <div class="addProblemHeaderTextDiv"></div>//DIV B 
      </div> 
     </div> 

pourquoi DIV A et B sont DIV overllaping?

Answer 1

Vous ne pouvez pas faire cela à cause du modèle de boîte CSS .. il ajoute la frontière 1px comme celui-ci

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

Cela pourrait fonctionner, en soustrayant à nouveau la frontière avec marge. Sinon, vous devez utiliser plus de balisage que j'ai peur.

.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%; 
} 

Answer 2

Utilisez

float: left; 

à addProblemHeaderTextDiv classe

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

Modifier

Pourquoi est-il indiqué dans deux lignes?

Puisque vous spécifiez la largeur comme 20% et 80%, ils rempliront tout l'espace. Vous définissez également la bordure, de sorte qu'il ne rentrera pas dans l'espace de 100%. Vous pouvez réduire la largeur de n'importe quelle div ou supprimer la bordure.