Jquery Tablesorter Widget bug?

Question

http://jsfiddle.net/abkNM/2808/

Just want to be sure I'm not completely ignorant of something. Taking out the everything works as intended. Add a div with a float, and the whole table breaks.

<div style="float:left; ">
    <table id="teams_table" class="tablesorter" style="float:left; width:100px; height:200px; font-size:14px">
        <thead>
            <tr>
                <th># of Votes</th>
                <th>Odds</th>
                <th>Team </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>200</td>
                <td>1.25</td>
                <td> Seahawks </td>
            </tr>
            <tr>
                <td>100</td>
                <td>1.15</td>
                <td> Patriots </td>
            </tr>
            <tr>
                <td>75</td>
                <td>1.10</td>
                <td>Seahawks </td>
            </tr>
            <tr>
                <td>90</td>
                <td>1.65</td>
                <td> Green Bay Packers </td>
            </tr>
        </tbody>
    </table>
</div>

$('.scroll-table').tablesorter({
    theme: 'blue',
    widgets: ['zebra', 'scroller'],
    widgetOptions: {
        scroller_height: 200
    }
});

Answer 1

The outer div needs to have some dimensions set when you float it (demo):

.wrapper {
    background-color: #eee;
    float: left;
    width: 200px;
    height: 200px;
}

I added a background color so you can better see it in the demo.