WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] float:left on ul li is causing div's below it to faulty position (2 posts)

  1. design_dolphin
    Member
    Posted 3 years ago #

    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/

  2. design_dolphin
    Member
    Posted 3 years ago #

    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;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic