Position div to make it visible while scroll

If I have a div with an overflow property and a wide (many columns) table within that div how would I position another element inside the first container that will remain visible withing the div as I scroll to the right/left while I view table data?

<div id="mainContainer" style="width:300px; overflow-x:auto">
    <div id="floatingContainer" style="border: 1px solid #ccc">Stay in the middle</div>
   开发者_开发知识库 <table>
    <tr>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
    </tr>
    </table>
</div>

Can it be done with CSS only or do I need to add some jQuery? I guess it's something like position: fixed except relative to the div that I place it in...

Maybe like this?

http://jsfiddle.net/eeRMV/7/

I didnt get it to work without the use of specific height attributes.

But some1 with more experience probably knows a way to do this without adding a specific height attr. to the three elements (#mainContainer,#floatingContainer,table).

Put your table in a div for whom who set width and height and with css property overflow: auto. That should give you the expected result

<div id="mainContainer" style="width:300px; overflow-x:auto">
<div id="floatingContainer" style="border: 1px solid #ccc">Stay in the middle</div>
<div style"height:100px;overflow: auto">   
  <table>
    <tr>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
    </tr>
  </table>

EDIT: If you want a scrollbar on your whole container you can go the jQuery way.

var floatingContainer = $('#floatingContainer');
$('#mainContainer').scroll(function(event) {
    floatingContainer.css('margin-left', event.currentTarget.scrollLeft);
});

Here is a demo on jsFiddle.