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.