In IE6, how to float item to right without clearing it?

Question

In IE6, HTML is as under:

<div id="topmenu">
    <ul>    
        <li>num 1</li>
        <li>num 2</li>
    </ul>
    <div id="rightItem">Hello World</div>
</div>

The CSS is as under:

#rightItem {
    cursor: pointer;
    float: right;
    clear: none;
    height: 100%;
    width: 340px;
}

#topmenu {
    margin: 0 auto;
    text-align: left;
    width: 960px;
    height: 41px;
}

It is floating the itemRight to right side on the same line (first UL and then rightItem) in all browsers except IE6. In IE6, it is CLEARING and FLOATING to the right. How can I fix it for IE6?

Answer 1

I suspect that #rightItem isn't actually clearing, but that it's width is different (wider) in IE6, which is causing it to push down onto the next line.

Floated elements should always have a width specified; try doing that first and see what results you get. Without seeing more of your HTML or CSS this is my best guess, and I'm only guessing because I'm tired of typing the words 'post more code' into comment fields...

Answer 2

Add overflow:hidden; to #topMenu. Works in all browsers.

See: http://www.quirksmode.org/css/clearing.html