CSS: background color pf parent DIVs not wrapping around child DIVs?

[eluser]chson[/eluser]
I've attached how the following code is rendered in Firefox. What I'm attempting to do is wrap the black background around the #logo and #menu DIVs. I realize I can do this by specifying a fixed height in #header but I'd like for this background to be dynamic. Anybody have any ideas? Thanks.

CSS:

Code:

#header, #footer {
        background-color:#222222;
        color:#FFFFFF;
        margin:0;
        padding:5px;
}

#logo {
        margin:0;
        padding:0;
        float: left;
}

#menu {
        margin:0 10px;
        padding:0;
        color:#BCFC3D;
        float:left;
}

HTML:

Code:

<div id="header">
        <div id="logo">
                &lt;?=anchor('/','Logo');?&gt;
        </div>

        <div id="menu">
                &lt;?=anchor('/tour','Tour');?&gt;
                &lt;?=anchor('/about','About');?&gt;
        </div>
</div>