verschachtelte Floating divs verursachen äußere div nicht wachsen

Question

Wenn jemand einen besseren Ort als stackoverflow für CSS Fragen vorschlagen können, lassen Sie es mich wissen.

Ich habe eine äußere Div mit Hintergrund und Rahmen und dann muss ich zwei Spalten innerhalb der farbigen Box haben. Irgendein Grund, wenn ich die floatenden divs innerhalb des äußeren div platziere, wächst das äußere div nicht.

Hier ist mein HTML:

.three-columns { 
    width: 290px; 
    float: left; 
    margin-right: 45px; 
} 
.tip_box { 
    padding: 20px; 
    margin: 20px 0px; 
    -moz-border-radius: 7px; 
    -webkit-border-radius: 7px; 
    -khtml-border-radius: 10px; 
    border-radius: 7px; 
    padding-left: 55px; 
    background: #eee; 
    font-style:italic; 
    background: #eff7d9 url(../images/icons/tip.png) no-repeat scroll 10px 15px; 
    border: 1px solid #b7db58; 
    color: #5d791b; 
} 

Screenshot:

<div class="tip_box"> 
    <h3>Send</h3> 
    <hr /> 
    <form id="email_form"> 

     <div class="three-columns"> 
      <div class="contact_form_input"> 
       <h6>Your Name</h6> 
       <input type="text" name="name_text_box" class="form_input" id="name_text_box" /> 
      </div> 
      <div class="contact_form_input"> 
       <h6>Your Email</h6> 
       <input type="text" name="email_text_box" class="form_input" id="email_text_box" /> 
      </div> 
     </div> 
     <div class="three-columns"> 
      <div class="contact_form_input"> 
       <h6>Recipient Name</h6> 
       <input type="text" name="name_text_box" class="form_input" id="Text1" /> 
      </div> 
      <div class="contact_form_input"> 
       <h6>Recipient Email</h6> 
       <input type="text" name="email_text_box" class="form_input" id="Text2" /> 
      </div> 
     </div> 

    </form> 
</div> 

<p>This is where your message will go. Anything you want, as long as you want. Make it personal; make the recipient know you care.</p> 

Hier mein CSS ist

http://dl.dropbox.com/u/2127038/cssissue.png

Answer 1

Nicht-Schwimmerblöcke, die Schwimmerblöcke enthalten, dehnen sich nicht automatisch aus, da Schwimmerblöcke außerhalb des normalen Durchflusses (oder zumindest speziell außerhalb des Durchflusses) entnommen werden. Eine Möglichkeit, dies zu korrigieren, besteht darin, die overflow-Eigenschaft zu hidden oder auto anzugeben.

.tip-box { overflow: auto; } 

Weitere Informationen finden Sie unter quirksmode.

Answer 2

In diesem Fall würde ich nicht die divs float links Ich würde sie anzeigen lassen: Inline oder Inline-Block.

Ihre 3 Spalten werden zu 2 Spalten, dann 1 Spalte, wenn das Browserfenster schrumpft.

Answer 3

Sie benötigen, was gemeinhin als Clearfix bekannt ist. In diesem Fall wird ein overflow: hidden auf dem Aufnahmeelement wird sie - siehe: http://www.jsfiddle.net/yijiang/zuNwH/2

.tip_box { 
    overflow: hidden; 
} 

Als Nebenwirkung, könnten Sie auch label Elemente statt h6 Markup-Etiketten für Ihre Formularelemente, und verwenden Sie eine Liste stattdessen verwenden möchten von einzelnen div s für jedes Paar label - input, und reduzieren Sie die Menge von class Attribut, das Sie verwenden, indem Sie auf komplexere Selektoren für Ihre CSS-Datei zurückgreifen.

<li> 
    <label for="recipient_email">Recipient Email</label> 
    <input type="text" name="email_text_box" id="recipient_email" /> 
</li> 

Answer 4

.tip_box { overflow:hidden; zoom:1; } 

dies stellt neuen Block-Formatierungskontext in IE7 + und anderen Browsern, löst hasLayout in IE6 Schwimmer

Answer 5

In enthält HTML folgender nach <div class="tip_box"></div>:

<div class="clear"></div> 

Hier ist die CSS :

.clear{ 
clear:both; 
} 

Es wird sicherlich funktionieren.