Question

I have a problem with a div in IE7, it’s disappearing and I don’t understand why.
I already tried to add zoom:1 and overflow: hidden as someone suggested but it is not working.

The div is inside an unordered list (floated left) as the last element, floated right.

This is the HTML

<div id="top_menu">
    <ul id="dropmenu">
        <li>menu item1</li>
        <li>menu item2</li>
        ...
     </ul>
    <div class="lang">content</div>
</div><!-- end top menu -->

This is the CSS

  #top_menu                     {width:900px;font-size:13px; }
    #top_menu ul#dropmenu           {width:630px; height:28px; margin:0px; padding:0px; list-style:none; float:left; }
    #top_menu ul#dropmenu li        {float:left;display:block;}
    .clearfix                       {display: inline-block;}  /* for IE/Mac */

    #top_menu .lang { width: 120px; color:#fff; margin:4px 10px 0 0; float: right; }
    #top_menu .lang a{ color:#ff8601; }
    #top_menu .lang a:hover{ color:#fff; }

Thanks for your help

EDIT: I included the html and removed url to avoid client complaints.

Answer 1

You need to add .clearfix to div#top_menu and add height: 24px; to div.lang

That fixed all the menu problems for me.

edit

…and probably don’t use absolute positioning to solve layout issues.