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>

[eluser]LifeSteala[/eluser]
You need to add this CSS.

Code:

.clearLeft {
  clear: left;
}

Then add a br as I have shown you here.

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>

        <br class="clearLeft" /> &lt;!-- ADD THIS LINE --&gt;
</div>

That should do it.

[eluser]chson[/eluser]
Thanks LifeSteala! I also noticed that just adding the BR by itself with no css works as well. Crazy!

[eluser]LifeSteala[/eluser]
Your welcome. I'll try to explain why: you have two divs, logo and menu, which are both floating. So your basically saying that both div's is not quite within the header div. So you add a line break after the floating div's which then renders correctly.

[eluser]dchuk[/eluser]
You could also add overflow: hidden to the header div. That would eliminate the need for the additional br tag which is good for limiting code clutter.

[eluser]Aken[/eluser]
A set height of the parent div is an ideal solution, but if the height will be variable, a clearing element is the recommended method. Doesn't need to be a <br /> tag, can be almost anything.

[eluser]umefarooq[/eluser]
just put will work

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

[eluser]Aken[/eluser]
[quote author="umefarooq" date="1261482559"]just put will work

#header, #footer {
background-color:#222222;
color:#FFFFFF;
margin:0;
padding:5px;
float:left
}[/quote]
Won't work without writing more CSS. This isn't a suitable solution for fixing the most basic "problem" of floating elements.

[eluser]John_Betong[/eluser]
&nbsp;
Here we go - try this

&nbsp;
&nbsp;
&nbsp;

[eluser]cyberbuff[/eluser]
I had the same problem with two floated divs (one floated right and the other left). I just added <div style="clear:both;"></div> and it worked.