Div est enveloppant tout dans le contenu et en sortir

Question

C'est bizarre! Je ne sais pas pourquoi il fait cela, mais la div .content-wrap, ou .main-content est enveloppant des éléments qui sont en dehors de la div .......

Capture d'écran en utilisant firebug.

Mais .main-content est est supposé ne pas être envelopper les 3 colonnes ...

Heres le code HTML des deux.

<div id="plans-wrap"> 
    <section class="starter"> 
    <img class="icon-1" src="../images/plan-icon.png" width="62" height="73" alt="Plan Icon"> 
     <h2>Starter Plan</h2> 
     <ul> 
     <li><span>5GB Disk Space</span></li> 
     <li><span>Unmetered Bandwidth</span></li> 
     <li><span>Unlimited Add-on Domains</span></li> 
     <li><span>Unlimited Subdomains</span></li> 
     <li><span>Unlimited Email/FTP Accounts</span></li> 
     <li><span>Unlimited MySQL Databases</span></li> 
     <li><span>Shell access upon request</span></li> 
     </ul> 
     <img src="images/starterplan.png" width="192" height="51" alt="Starter Plan"> 
    </section><!-- //.starter --> 

    <section class="inter"> 
     <img class="icon-2" src="../images/plan-icon.png" width="62" height="73" alt="Plan Icon"> 
     <h2>Intermediate Plan</h2> 
     <ul> 
     <li><span>10GB Disk Space</span></li> 
     <li><span>Unmetered Bandwidth</span></li> 
     <li><span>Unlimited Add-on Domains</span></li> 
     <li><span>Unlimited Subdomains</span></li> 
     <li><span>Unlimited Email/FTP Accounts</span></li> 
     <li><span>Unlimited MySQL Databases</span></li> 
     <li><span>Shell access upon request</span></li> 
     </ul> 
     <img src="images/interplan.png" width="192" height="51" alt="Intermeidate Plan"> 
    </section><!-- //.intermediate --> 

    <section class="advance"> 
     <img class="icon-3" src="../images/plan-icon.png" width="62" height="73" alt="Plan Icon"> 
     <h2>Advance Plan</h2> 
     <ul> 
     <li><span>Unmetered Disk Space</span></li> 
     <li><span>Unmetered Bandwidth</span></li> 
     <li><span>Unlimited Add-on Domains</span></li> 
     <li><span>Unlimited Subdomains</span></li> 
     <li><span>Unlimited Email/FTP Accounts</span></li> 
     <li><span>Unlimited MySQL Databases</span></li> 
     <li><span>Shell access upon request</span></li> 
     </ul> 
     <img src="images/advplan.png" width="192" height="51" alt="Starter Plan"> 
    </section><!-- //.advance --> 
    </div><!-- //#plans-wrap --> 
    <div class="content-wrap"> 
     <aside class="badges"> 
     <img src="images/sidebar-stickers.png" width="150" height="634" alt="Sidebar Stickers"> 
     </aside><!-- //.badges --> 

     <div class="main-content"> 
     <!-- All Content For Each Page Goes Here --> 
     <!-- index/home --> 

     <img src="images/hosting-header.png" width="458" height="179" alt="Hosting Header"> 
     <article> 
      <h1> Welcome to Elektrik Host! </h1> 
      <p> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sodales nisi eu sem dapibus imperdiet. 
      Etiam venenatis elit nec sapien commodo dapibus. Donec vel enim nec augue fringilla pharetra. Pellentesque 
      sed augue est. Nullam et erat sed leo vestibulum consequat sit amet at ligula. 
      </p> 
     </article><!-- //article --> 
     </div><!-- //.main-content --> 
    </div><!-- //#content-wrap --> 

et le CSS:

/* -- PRICE PLANS -- */ 
#plans-wrap { margin: 0 0 0 5px; width: 100%; } 
#plans-wrap section { background: #1b1b1b; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; float: left; margin: 19px 10px 0 0; } 
#plans-wrap section img.icon-1, #plans-wrap section img.icon-2, #plans-wrap section img.icon-3 { float: right; } 
#plans-wrap section h2 { background: url(../images/plan-header-bg.png) repeat-x; display: block; border-radius: 10px 10px 0 0; -moz-border-radius: 10px 10px 0 0; -webkit-border-radius: 10px 10px 0 0; font-size: 15px; padding: 18px 18px 32px 6px; width: 188px; } 
#plans-wrap section h2:before { content: "» "; } 
#plans-wrap ul { padding: 0px 23px 23px 23px ; } 
#plans-wrap ul li { color: #b60000; font-size: 12px; margin: 9px 0 0 0; } 
#plans-wrap ul li span { color: #b6b6b6; } 

/* -- CONTENT WRAP -- */ 
#content-wrap { margin: 12px auto; width: auto; } 
#content-wrap .badges { float: right;} 

Comment puis-je résoudre ce problème?

Answer 1

Vous devez «nettoyer les flotteurs». L'élément plans-wrap renferme donc trois éléments flottants à l'intérieur. Sinon, les flotteurs sont sortis du flux normal, plans-wrap a une hauteur nulle et le div suivant (main-content) chevauche les flotteurs. Cela devrait aider:

#plans-wrap { 
    overflow:hidden; 
    zoom:1; 
} 

More info

Answer 2

Votre #plans-wrap n'a pas de hauteur spécifiée. Essayez d'ajouter overflow:auto à son CSS.

Answer 3

Vous pouvez également flotteurs clairs avec the clearfix method.

Vous devez ajouter une classe de « clearfix » à votre .main contenu et les éléments suivants à votre CSS:

.clearfix:after { 
visibility: hidden; 
display: block; 
font-size: 0; 
content: " "; 
clear: both; 
height: 0; 
} 
.clearfix { display: inline-table; } 
/* Hides from IE-mac \*/ 
* html .clearfix { height: 1%; } 
.clearfix { display: block; } 
/* End hide from IE-mac */ 

Cette méthode utilise essentiellement la pseudo-classe pour ajouter le conteneur parent à flotta des éléments avec un caractère espace qui entraînera le parent à contenir tous les éléments flottants.

* REMARQUE: Assurez-vous également que tout est correctement fermé. It *