Support » Themes and Templates » float:left on ul li is causing div's below it to faulty position

  • Resolved design_dolphin

    (@design_dolphin)


    I am working on a theme, and the menu has a float:left for the individual menu items (ul li):

    #main_menu ul li {
        float: left;
        text-transform: uppercase;
        vertical-align: middle;
    }

    This float:left is interfering with the div structure below, until it reaches a clear:both underneath the “le” and “r” div. Getting rid of the float:left solves it, however then the menu does not look right. How can I stop it from doing that?

    A link to the theme:
    http://www.ecodelphinus.com/temp/

Viewing 1 replies (of 1 total)
  • The problem was a display:block value in the a href value in the CSS. This was overriding any attempt of adding display:inline to the ul li.

    #main_menu a {
        display:block;
        padding: 15px 30px 13px;
    }

    Removing the display:block from the a href and replacing float:left in the ul li with display:inline solved it.

    #main_menu ul li {
        display:inline;
        text-transform: uppercase;
        vertical-align: middle;
    }
Viewing 1 replies (of 1 total)
  • The topic ‘float:left on ul li is causing div's below it to faulty position’ is closed to new replies.