Home/ Questions/Q 402785
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T17:09:25+00:00

I have a div named footerWrap, which contains 3 unordered lists. I floated left,

  • 0

I have a div named footerWrap, which contains 3 unordered lists.
I floated left, all the unordered lists.

My intention was to make the footerWrap grow in height according to the height of the unordered lists. However… in all browsers (exept IE6) the unordered lists pass over the div… like they had z-index atribute!

I tried to place a div at the end, with the clear:all, and i also tried to make float:none on the div#footerWrap

This is my Doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

This is my Full CSS code:

div#footerWrap
{
    height:180px;
    background-color:#5c5c5c;
    background-image:url('../../img/bgFooter.png');
    background-repeat:repeat-x;
    background-position:top;
    padding-top:20px;
    padding-left:15px;
    margin-top:20px;
}



    /* menus footer */
    div#footerWrap ul#mainMenu,
    div#footerWrap ul#myMenu,
    div#footerWrap ul#othersMenu
    {width:180px; float:left;}

        div#footerWrap ul#mainMenu li a,
        div#footerWrap ul#myMenu li a,
        div#footerWrap ul#othersMenu li a 
        {
            color:#dadada;
            text-decoration:none;
            padding:5px;
        }

            div#footerWrap ul#mainMenu li a,
            div#footerWrap ul#othersMenu li a
            {padding:5px 10px;}

            /* hover */
            div#footerWrap ul#mainMenu li a:hover,
            div#footerWrap ul#othersMenu li a:hover
            {color:#fff; background-color:#666;}


    /* menu principal */
    div#footerWrap ul#mainMenu {margin-top:-10px;}

        div#footerWrap ul#mainMenu li{line-height:24px;}       

        /* /menu principal */



        /* o meu menu*/
        div#footerWrap ul#myMenu {margin-left:15px;}

            div#footerWrap ul#myMenu li {color:#fff; line-height:22px;}

                    div#footerWrap ul#myMenu li.myMenuItem a 
                    {
                        background-image:url('../../img/smallArrow.gif');
                        background-repeat:no-repeat;
                        background-position:left 7px;
                        padding-left:15px;
                        padding-right:20px;
                    }

                        div#footerWrap ul#myMenu li.myMenuItem a:hover
                        {color:#fff; background-color:#666;}                
        /* /o meu menu */



        /* outros menu */
        div#footerWrap ul#othersMenu {margin-left:300px; width:340px;}

            div#footerWrap ul#othersMenu li 
            {
                color:#fff;
                line-height:22px;
            }

                div#footerWrap ul#othersMenu li a{margin-left:5px;}
                div#footerWrap ul#othersMenu li a span {margin-left:-5px;}

        /* /outros menu */

And this is my XHTML code:

       <div id="footerWrap">

            <!-- menu principal -->
            <ul id="mainMenu">
                <li><a href="#">item</a></li>
            </ul>


            <!-- o meu menu -->
            <ul id="myMenu">
                <li>meu menu</li>
                <li class="myMenuItem slideMenuItem"><a href="#">item</a></li>
            </ul>


            <!-- outros menu -->
            <ul id="othersMenu">
                <li><span>outros</span></li>
                <li><a href="#">item</a></li>
            </ul>

        </div>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You don’t need height: 180px; on #footerWrap. Floating the 3 ul’s left is good but you need to clear them.

    Add .clear {clear:both;} to your CSS.
    Add <div class="clear"></div> before closing the #footerWrap div.

    You might also try adding position: relative; to #footerWrap and adding div#footerWrap ul {display: block;} to your CSS.

    • 0