div color de fondo no funciona con las entradas flotadas a la izquierda

Question

Necesito el siguiente div para tener un color de fondo: simple a la derecha. Pero, no funciona correctamente. Hice algunas pruebas, y descubrí que son los flotadores en los tramos que lo están atornillando. Entonces, ¿cómo puedo arreglar esto?

.days{ 
background-color:#000; 
} 

span { 
display:block; 
width:200px; 
float:left; 
} 

<div class="days"> 
     <span> 
     <input id="Field9" name="Field9" type="checkbox" value="" size="3" maxlength="4" tabindex="4" /> 
     <label class="days" >Monday</label> 
     </span> <span> 
     <input id="Field5" name="Field10" type="checkbox" value="" size="3" maxlength="4" tabindex="4" /> 
     <label class="days" >Tuesday</label> 
     </span> <span> 
     <input id="Field5" name="Field11" type="checkbox" value="" size="3" maxlength="4" tabindex="4" /> 
     <label class="days" >Wednesday</label> 
     </span> <span> 
    <!-- goes till sunday --!> 
</div> 

Answer 1

Cuando usted flota elementos, se los saca del flujo normal del documento, y como resultado, otros elementos no flotados no hacen lugar para ellos.

Lo que estás observando es que tu div ya no toma la altura completa de sus elementos secundarios porque están flotando. Todo lo que tiene que hacer es "borrar" o deshacer la flotación y hacer que days tome la altura máxima y se mostrará el color de fondo. Mi forma preferida de la limpieza de los flotadores es dar a su elemento overflow: hidden que contiene:

.days 
{ 
    background-color:#000; 
    overflow: hidden; 
} 

Para obtener más información sobre los flotadores de compensación, consulte el artículo Quirksmode.org al respecto, que incluye una explicación del método overflow: hidden.

Answer 2

Usted puede aplicar el background-color a la <span>, se fija una altura a la <div class="days">, o poner un <div> por debajo de la <span> con el CSS clear:both;.

Answer 3

Supongo que no puede cambiar el color de fondo del div. Puede ver la versión fija en http://jsfiddle.net/FazXG/2/