enfant div en dehors du parent

Question

Je suis actuellement en train de concevoir un site web. Mais dans l'un de mes parents div box_t, l'enfant divs box_t1 et box_t2 sort du box_t.

Html:

<div id="main_container"> 
    <div class="box_t"> 
    <div class="box_t1"> 
     <h2>Start</h2> 
    </div> 
    <div class="box_t2"> 
     <div class="boxt21"> 
     <h2>Name</h2> 
     </div> 
     <div class="boxt22"> 
     Hi 
     </div> 
    </div> 
    </div> 
</div> 

CSS:

#main_container 
{ 
    width:960px; 
    margin:0 auto; 
} 
.box_t 
{ 
    padding:20px 14px 20px 15px; 
    color:#07337a; 
    overflow:hidden; 
} 
.box_t h2 
{ 
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; 
} 
.box_t1 
{ 
    width:340px; 
    float:left; 
} 
.box_t2 
{ 
    float:left; 
} 
.box_t2 
{ 
    margin-left:255px; 
} 
.boxt21 
{ 
    float:left; 
} 
.boxt22 
{ 
    float:left; 
} 

Answer 1

Vos div divs ne vont pas à l'extérieur du div parent, mais ce que vous voyez sur dream waver est dû au style d'affichage du contenu html de dream waver.

Vérifiez le rendu visuel de votre code dans le navigateur

Answer 2

Vous devez effacer vos flotteurs

<div id="main_container"> 
<div class="box_t"> 
      <div class="box_t1"> 
       <h2>Start</h2> 
      </div> 
      <div class="box_t2"> 
       <div class="boxt21"> 
        <h2>Name</h2> 
       </div> 
       <div class="boxt22"> 
        Hi 
       </div> 
      </div> 

</div> 

Il y a une meilleure façon de le faire, créer une classe appelée clearfix et l'ajouter à la br ... et vraiment, vous devriez même inclure un br ... mais vous allez.

Answer 3

Vous devez utiliser clearfix pour le bloc parent. Il ya beaucoup de façons de le faire définir overflow:hidden ou définir à l'élément inférieur avec clear: both bloc vide à l'intérieur du parent. Ma façon fav est:

// for modern browsers 
    .clearfix:before, 
    .clearfix:after { 
    content: ""; 
    display: table; 
    } 
    .clearfix:after { 
    clear: both; 
    } 

    /* IE6-7 */ 
    .clearfix { 
    zoom: 1; 
    } 

Utilisez classe sur votre div parent et c'est tout.

Answer 4

Chaque fois que vous utilisez le float pour votre div. Rappelez-vous à clear le flotteur.Tout le problème est que floated objects do not add to the height de l'objet dans lequel résident correctement. Et donc div enfant semble être en dehors de div div. Tout ce que nous devons faire est d'effacer le flotteur, et tout ce problème disparaît. Mettez ce vide div après votre dernier objet taloché:

<div style="clear: both;"></div>

Answer 5

Je suggère d'utiliser les frontières (style = « border: rouge 1px solid ») sur toute la div tout en développant une mise en page, il est utile de savoir où exactement les divs sont positionnés.

Ceci aide les développeurs qui n'utilisent pas Dreamweaver ou d'autres outils d'édition.