div and span together

I'm using a CSS style sheet to style several blocks in my HTML. The class "header" is used to denote these blocks.

In my CSS sheet I have:

.header
{
    background-color: #efefef;
    margin-bottom:.4em;
}

then in the HTML I have:

<div class = "header">
    <span style = "float:left;" >
    <b>My&nbsp;Colors</b></span>
    <span style = "float:right;" >
    <input type="text" name="color" value = "Enter&nbsp;a&nbsp;color"/>
    <input type="submit" value="Add" /></span>
</div>

along with several other blocks using class = "header". The other blocks are being styled correctly, but the one above is not (the CSS has no effect on it).

Is there something going wrong with putting开发者_运维技巧 span tags inside a div? What would be the reason for the CSS working with the other blocks, but not this one?

---

You need to clear the floats

like this

<div class = "header">
    <span style = "float:left;" > <b>My&nbsp;Colors</b></span>
    <span style = "float:right;" >
        <input type="text" name="color" value = "Enter&nbsp;a&nbsp;color"/>
        <input type="submit" value="Add" />
    </span>
    <div style="clear:both;"></div>
</div>

I added <div style="clear:both;"></div> right before </div>

---

Since you're floating the SPAN elements you'll need to tell your DIV to handle the flow properly. Adding overflow:auto to the class will do the trick.

Obligatory fiddle : http://jsfiddle.net/bznCp/1/