Float left breaks background colour

Essentially I’m creating a ‘drop-up’ menu without javascript.

Here is my test page:
http://38.99.165.179/kalle/cssmenu/index3.html

PROBLEM:

I am using ‘float: left’ to arrange my main menu items horizontally.

With ‘float: left’ it seems like I lose control over the #menu_container background color. It’s supposed to be a shade of red. If I delete ‘float: left’, I regain control over the container background, and the shade of red appears.

Why is this happening?

This problem doesn’t seem to exist if I use ‘display: inline’ instead of ‘float: left’, to sort my main menu items horizontally. BUT ‘display: inline’ causes other issues, and so for various reasons I’d like to try to keep using float: left.

Here is my code:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>

<style>

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #555555;
    color: #EEEEEE;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

#top {
    width: 100%;
    height: 80%;
    text-align: center;
}


/* MENU BAR */

#menu_container {
    width: 100%;
    margin: 0 auto;

    /* doesn't work!!! */
    background-color: #CC6666;
}


#menu {
    font-size: 16px;
}

#menu a {
    text-decoration: none;
    color: #FFFFFF;
}

#menu ul {

}

#menu li {
    position: relative;
    display: block;
    height: 1.2em;
    margin-right: 50px;
    text-align: left;



/* PROBLEM */
/* With 'float: left', the background color disappears for #menu_container. */
/* Disable 'float: left' here, and you see what I mean. */
/* Why does this happen?

    float: left;

/* The 'float: left' is needed to sort my main menu items horizontally. If I use the alternate way 'display: inline', then my drop-up menus don't automatically attach themselves to the correct spot. I want to avoid manually positioning them. */

}

#menu li ul {
    background-color: #BBBBBB;
    position: absolute;
    bottom: 1.2em;
    display: none;
    list-style: none;
    width: 110px;
    padding: 0px;
}

#menu li:hover ul {
    display: block;
    white-space: nowrap;
}

#menu li:hover ul li {
    display: block;
}

#menu li:hover ul li:hover {
    background-color: #777777;
}

/* END - menu bar */


#bottom {
    margin-top: 70px;
    height: 150px;
    text-align: center;
    clear: both;
    padding-top: 2px;
    background-color: #222222;
}


</style>

</head>


<body>


<div id="top">

    content

</div>

<div id="menu_container">

    <ul id="menu">
        <li><a href="#">Home</a>
            <ul>
                <li><a href="#">Anything</a></li>
                <li><a href="#">Needed</a></li>
                <li><a href="#">Here?</a></li>
            </ul>
        </li>
        <li><a href="#">Something 1</a>
            <ul>
                <li><a href="#">Imagine</a></li>
                <li><a href="#">the</a></li>
                <li><a href="#">Possibilities</a></li>
                <li><a href="#">of Magic!</a></li>
            </ul>
        </li>
        <li><a href="#">Something 2</a>
            <ul>
                <li><a href="#">Taste</a></li>
                <li><a href="#">the</a></li>
                <li><a href="#">Sensation</a></li>
                <li><a href="#">of the Bubbles</a></li>
                <li><a href="#">on your Tongue!</a></li>
            </ul>
        </li>
        <li><a href="#">Something 3</a></li>
        <li><a href="#">Contact</a></li>
    </ul>


</div>


<div id="bottom">

    content

</div>

</body>
</html>

You have failed to enclose your float elements. Add {display: table;} to #menu_container. The width property takes care of IEs 6&7. The overflow property would cause the drop-ups to be cut off.

cheers,

gary