Div moves in IE

Question

I have a table with two columns. The left column has some content and a widget div that is the only floated element. This div keeps moving to the bottom of the page taking the right column of the table with it when the page loads. Sometimes it moves back when I hover something, it seems to be completely random.

Seems like the IE peek-a-boo bug but not quite. I've tried position: relative; but it doesn't work. Any ideas?

Here's the html:

<table class="formTable">
    <tr>
        <td class="content_main">
            <h1>header</h1>
            <table>
                <tr>
                    <td>Content here</td>
                    <td>Content here</td>
                </tr>
            </table>

            <div style="float: left; clear: none; display: block; color: rgb(68, 68, 68); font-weight: normal; font-family: &quot;Trebuchet MS&quot;,&quot;Verdana&quot;,sans-serif; font-size: 14px; line-height: 18px; text-decoration: none; text-align: left; margin: 0px; padding: 10px; height: auto; width: auto; background-image: none; background-color: white; border: 10px solid rgb(204, 204, 204); overflow: auto;" id="widget">
                Content
            </div>
        </td>
        <td class="content_right">
            <ul>
                <li>List</li>
                <li>List</li>
            </ul>
        </td>
    </tr>
</table>

And here's the css for the table:

.content_right {
    padding-left: 20px;
    padding-top: 15px;
    width: 393px;
}
.content_main {
    padding-top: 15px;
    width: 500px;
}

Answer 1

Working fine for me. If you know how to use divs, avoid tables.