side by side scroll region in html?

I am trying to set up a webpage that has a long list (in table form) on the left hand side of the page and on the right hand side are buttons and stuff that will effect items in that list. I would like the list to be scrollable, but for the buttons and stuff to be stationery.

In its simplest form, so far I have this

<div style="height:100%; width:80%; overflow:auto;" valign="top">

<table> <tbody>

<tr><td>howdies</td></tr> <tr><td>howdies</td></tr> <tr><td>howdies</td></tr> <tr><td>howdies</td></tr>

<tr><td>howdies</td></tr> <tr><td>howdies</td></tr> <tr><td>howdies</td></tr> <tr><td>howdies</td></tr>

(repeated enough times to be longer than the height of the browser window - to force scrollbar)

<tr><td>howdies</td></tr> <tr><td>howdies</td></tr> <tr><td>howdies</td></tr> <tr><td>howdies</td></tr>

<tr><td>howdies</td></tr> <tr><td>howdies</td></tr> <tr><td>howdies</td></tr> <tr><td>howdies</td></tr>

</tbody> </table>

</div>

<span width="auto">right side</span>

This has the table scrollable, but I can't seem to figure out how to get the right side to be on the righthand side without the line break after the <div>.

I have tried setting the style for <div> to be inline, but that ended up disabling the scrolling. I tried putting it all in one table, but again, that disabled the scrolling part.

I could put all of this into an iframe, but because the stuff on the right side is going to effect the stuff in the table, I can see that the iframe route is going to be yucky (going up and down levels in the javascript stuff).

Is there something I'm missing or have overlooked? I can't seem to find a solution for how to do this.

My primary target is for Firefox, but I'd prefer a solution that would work on any browser.

Thanks.