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

  • Resolved CodePoet

    (@design_dolphin)


    13 years, 3 months 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/

Viewing 1 replies (of 1 total)
  • Thread Starter CodePoet

    (@design_dolphin)

    13 years, 3 months 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;
}
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.