div disappearing in IE7

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</l开发者_高级运维i>
        <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.

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.

i'm on IE9 now, but putting this site into "Compatibility View" seems to show the issue too.

The last entry in the main menu [ul] seems to extend all the way to the right of the element. This appears in markup before the .lang div so I wouldn't expect it to be covering it up...

Have you maybe tried putting the .lang element into "position:absolute" and then seeing if it shows up, (obviously assuming the parent element of it is positioned relatively). After that maybe try absolute with a top of 20px or so and see if it shows up then.

Good Luck!

UPDATE

Hang on a tick there. your .lang div is inside the [ul] element so is actually incorrectly positioned, since the only element allowed as a child of a [ul] is a [li].

Why not try taking this div out of the list and have it instead, just outside, as a child of the #top_menu element....?

That might work!

Not sure if this is relevant to your situation, but some versions of IE will throw away empty divs; if the div doesn't contain anything, adding something like   will force it to exist.