Divs flotantes anidados causan que div externo no crezca

Question

Si alguien puede sugerir un lugar mejor que stackoverflow para preguntas css, por favor avíseme.

Tengo un div exterior con fondo y borde y luego necesito tener dos columnas dentro del cuadro coloreado. Alguna razón cuando coloco los divs flotantes dentro del div externo, el div externo no crece.

Aquí es mi HTML:

<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> 

Aquí es mi CSS:

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

Captura de pantalla:

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

Answer 1

Los bloques no flotantes que contienen bloques flotantes no se expandirán automáticamente, ya que los bloques flotantes se toman fuera del flujo normal (o al menos especialmente fuera del flujo). Una forma de corregir eso es especificar la propiedad overflow en hidden o auto.

.tip-box { overflow: auto; } 

Ver quirksmode para más.

Answer 2

En este caso no me dejaron flotar los divs , Les mostraría: en línea o en línea.

Sus 3 columnas se convertirán en 2 columnas, luego 1 columna si la ventana del navegador se reduce.

Answer 3

Vas a necesitar lo que comúnmente se conoce como un clearfix. En este caso, un overflow: hidden en el elemento que contiene HARÁ - ver: http://www.jsfiddle.net/yijiang/zuNwH/2

.tip_box { 
    overflow: hidden; 
} 

Dicho sea de paso, también puede que quiera usar label elementos en vez de h6 para el marcado de etiquetas para sus elementos de formulario, y utilizar una lista en lugar de div s individuales para contener cada par label - input, y reducir la cantidad del atributo class que utiliza al confiar en selectores más complejos para su archivo CSS.

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

Esto establece nuevo contexto de formato de bloque en IE7 + y otros navegadores, se dispara hasLayout en IE6 para contener los flotadores

Answer 5

Agregar código HTML siguiente después de <div class="tip_box"></div>:

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

Aquí es el CSS :

.clear{ 
clear:both; 
} 

Sin duda funcionará.