div background color not working with inputs floated left

Question

I need the following div to have a background color - simple right. But, it doesn't work correctly. I've done some testing, and figured out its the floats on the spans that are screwing it up. So, how do i fix this?

.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

When you float elements, you take them out of the normal flow of the document, and as a result, other non-floated elements do not make room for them.

What you're observing is that your div no longer takes the full height of its child elements because they're floated. All you need to do is to "clear" or undo the floating, and make days take the full height, and its background color will show. My preferred way of clearing floats is to give your containing element overflow: hidden :

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

For more info about clearing floats, check out the Quirksmode.org article about it, which includes an explanation of the overflow: hidden method.

Answer 2

You can either apply the background-color to the <span> , set a height to the <div class="days"> , or put a <div> below the <span> with the CSS clear:both; .

Answer 3

I'm assuming you are not able to change the background color of the div. You can see the fixed version at http://jsfiddle.net/FazXG/2/