Clever Geek Handbook

Float and height

I have a div named footerWrap that contains 3 unordered lists. I swam to the left, all unordered lists.

My intention was to make footerWrap grow in height according to the height of the unordered lists. However ... in all browsers (except IE6), unordered lists go through the div ... as if they had a z-index attribute!

I tried to put the div at the end, with clear: all, and I also tried to do 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 complete 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>
+2


source to share


2 answers


You don't need height: 180px;

to #footerWrap

. The floating 3-left ones on the left are good, but you need to clear them.

Add .clear {clear:both;}

to your CSS. Add <div class="clear"></div>

before closing the div #footerWrap

.



You can also try add position: relative;

in #footerWrap

and add div#footerWrap ul {display: block;}

in your CSS.

+8


source


Why don't you try margin:

div#footerWrap ul#mainMenu {margin-left:0}
div#footerWrap ul#myMenu {margin-left:200px}
div#footerWrap ul#othersMenu {margin-left:200px}


Actually 180 seems to be enough, but the rendering also includes shims, so you need a number greater than 180

-1


source






More articles:


All Articles