¿Por qué mi div contenedor no contiene mis elementos flotados?

Question

Estoy creando un sitio web para la competencia "Math Relay" de mis escuelas.

Tengo un div "Contenedor" (con un fondo blanco), luego una barra superior, barra izquierda, y div derecha dentro del contenedor.

barra izquierda y barra derecha flotan dentro de "Contenedor".

Sin embargo, si nos fijamos en la imagen de abajo puede ver que la barra derecha tiene el fondo gris debajo. Si "Contenedor" realmente contiene ambas barras superior, izquierda y derecha, entonces debe ser el fondo de los contenedores que se muestra y el fondo debe tener un nivel uniforme con un color blanco.

En su lugar, parece que el contenedor no contiene por completo la barra izquierda & y, por lo tanto, se muestra el fondo real del cuerpo en la parte inferior de la barra derecha.

Aquí es mi CSS:

#container { 
    margin: 0 auto; 
    width: 750px; 
    background-color: #ffffff; } 

#top-panel { 
    background-color: #000000; 
    text-align: left; 
    width: 100%; 
    height: 88px; 
    float: left; } 

#left-panel { 
    clear: left; 
    text-align: center; 
    background-color: #ffffff; 
    border-right: 1px dashed #000000; 
    float: left; 
    width: 250; } 

#right-panel { 
    background-color: #ffffff; 
    float: left; 
    width: 499; } 

enlace a la página here.

¿Cómo puedo hacer que el "contenedor" realmente contenga los divs dentro de él para que el fondo gris no se muestre debajo de mi panel derecho y cree mi nivel desigual en la parte inferior?

Answer 1

Ambos paneles flotan y, por lo tanto, se eliminan del flujo normal de la página. Para que el contenedor los encapsule, debes limpiar el flotador. La forma en que hago es hacer que la clase es claro para sa:

.clear { 
    clear:both; 
    line-height:0; 
} 

De esta manera no ocupa espacio y es una clara. Luego póngalo debajo de los dos divs en el contenedor div como tal

<br class="clear" /> 

Should work!

Answer 2

Nada está forzando la contención, puede especificar un claro en el último elemento para forzar la conatinment. Un truco común es añadir un elemento adicional de bloqueo con clear:both es decir: <div style="clear:both"></div>

Answer 3

overflow: auto 

debe solucionarlo.

Answer 4

Hay un método de css único para tratar el problema llamado clearfix. Lo mejor es usarlo como una clase de aplicar de forma selectiva a los divs que desee:

.clearfix { 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
} 

Por su margen de beneficio específico, el siguiente CSS hará:

#left-panel:after, 
#right-panel:after { 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
} 

Referencia http://www.positioniseverything.net/easyclearing.html

Answer 5

overflow:hidden; height:100%; <-- for ie 

En el contenedor lo hará.