WordPress.org

Support

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

[Resolved] float:left on ul li is causing div's below it to faulty position

  • design_dolphin
    Member

    @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)
  • design_dolphin
    Member

    @design_dolphin

    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 ‘[Resolved] float:left on ul li is causing div's below it to faulty position’ is closed to new replies.