problemas para posicionar div debajo de varios flotantes left divs

Question

Es un poco complicado describir problemas de CSS, pero haré todo lo posible.

Debajo de mi barra de navegación, tengo un contenedor div. Está configurado a 80% de ancho.

En el contenedor div, tengo un div box-wrapper que contiene cuatro divs que son todos float:left; Son de esa manera para que puedan desplegarse de uno en uno dependiendo del tamaño del navegador del usuario.

Debajo del envoltorio de la caja hay otro divisor box-wrapper2 que contiene cuatro divs que no flotan.

Aparecen uno encima del otro.

El problema es que, por alguna razón, el div box-wrapper2 se desplaza hacia arriba y detrás del contenedor de la caja. Lo quiero posicionado debajo del contenedor superior.

¿Cómo puedo hacer esto?

Aquí está la página que estoy hablando: http://www.rattletree.com/index2.php

Si utiliza quemador, y la pasa sobre la primera div "programDetail", se puede ver que va hacia arriba y debajo de la div anteriormente.

¡Gracias por cualquier ayuda!

Answer 1

Ver este enlace para más opciones para resolver su problema: http://www.quirksmode.org/css/clearing.html

Opción 1. Creo que se puede establecer sus DIV contenedor a overflow:hidden; que despejará ellos y volcar el segundo recipiente hacia abajo de manera que no hay superposición.

Opción 2. Debe establecer un div debajo de sus flotadores que los borre. Hay varias maneras de hacer esto, pero la más sencilla es establecer otra div debajo de los flotadores con el css clear:both

Nota al margen: Asegúrese de dar también su liquidación de Div A height:0;line-height:0;display:block; para asegurar que no añade ningún cobarde espacio en la parte inferior de los contenedores del

---

EDIT: Dado que esta cuestión fue el último pedido (y respondió) nuevas formas de lograr el efecto deseado haber cambiado. Una práctica común es tener un div contenedor con los siguientes estilos:

.container:before, 
.container:after { 
display: table; 
line-height: 0; 
content: ""; 
} 
.container:after { 
clear: both; 
} 

Este método es utilizado por los marcos populares (por ejemplo - Zurb Fundación & Twitter Bootstrap)

Answer 2

Si entiendo el problema, creo debe aplicar estos estilos ...

.boxWrapper { 
    border: 1px solid red; 
    float: left; 
    height: 100%; 
    width: 100%; 
} 

.programDetailWrapper { 
    border: 1px solid red; 
    float: left; 
    height: 100%; 
}