CSS Forum

**RamboJ** · 08-10-2010, 12:45 PM

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:

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>

**vangogh** · 08-10-2010, 03:20 PM

When you float the list items you're removing them from normal document flow. As far as the container is concerned there's nothing inside it so it has no width and height. You can either explicitly set width and height on the container or add the background to the list items that you'd floating.

Another solution and probably the one you'll want to use is to add overflow: hidden to the container. That forces the container to hold width and height and your background should display.

**CSM** · 08-10-2010, 05:16 PM

Hey there.

First of all:

Doctype is missing.

After deleting the float:left; I could not see any difference using Firefox 3.6.8 and latest Chrome...

Why that?