Css float inner div with overflow

Question

I have this html: http://jsfiddle.net/mW2Jh/3/

<div style="width:200px;overflow-x:auto">
    <table style="background-color:yellow" width="400px" height="200px">
        <tr>
            <td>first column</td>
            <td>second column</td>
            <td style="width:20px;">BTN</td>
        </tr>

I want the BTN column to be attached to the right of the div container. If I scroll horizontally, I want the button to always be on the right. If I scroll vertically, I want the buttons to scroll with the rows of the table. The solution can work on all browsers.

Old code used css expression (works only in IE <= 8)

Thanks and sorry for my english

Answer 1

Using jQuery, use the scrollLeft () property of the document! It will work

$(window).scroll(function(event) {
   $(id).css("margin-left", 400-$(document).scrollLeft());
});

see also

http://jsfiddle.net/zhQkq/9/