Float left breaks background colour

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

Here is my test page:


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">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />


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;

/* 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;




<div id="top">



<div id="menu_container">

    <ul id="menu">
        <li><a href="#">Home</a>
                <li><a href="#">Anything</a></li>
                <li><a href="#">Needed</a></li>
                <li><a href="#">Here?</a></li>
        <li><a href="#">Something 1</a>
                <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>
        <li><a href="#">Something 2</a>
                <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>
        <li><a href="#">Something 3</a></li>
        <li><a href="#">Contact</a></li>


<div id="bottom">




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.