bootstrap affix floats all the way to the left when scroll

Question

I have a div within a container that I would like to stay fixed on the right side of the screen. But when the user start to scrolls it just shifts all the way to the left. Thanks for any help.

http://jsfiddle.net/kbLak/

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap.min.css" rel="stylesheet">

recent things:

        </div>
    </div>
</div>
<div class="explore_recentAlbums" data-spy="affix" data-offset-top="20">
    <div class="ex_recentBar">
        <div class="ex_titleDetails">
            <span>recent stuff: </span>
        </div>
    </div>
    <table>
        <tr>
            <td>

                    <div class="well well-small" style="margin-bottom: 1px;">
                        <span>Recent</span>
                    </div>

                    <span class="NoDataFound">No Photo.</span>


                    <div class="smallalbumcover">
                        <div class="mosaic-blocksmall mofade">
                            <div class="mosaic-overlay">
                                <div class="details">
                                    <p>
                                        <a href="#">xzxz</a>
                                    </p>
                                </div>
                            </div>
                            <div class="mosaic-backdrop">
                                <img src=""/>
                            </div>
                        </div>
                        <div class="clearfix">
                        </div>
                    </div>

                    <div style="margin-bottom: 1em; text-align: center; margin-top: 10px;">
                        <a style="text-decoration: none;" href="/pics"><span class="label label-info">View More</span></a>
                    </div>

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

                    <div class="well well-small" style="margin-bottom: 1px;">
                        <span>Recent Video Albums</span>
                    </div>

                    <span class="NoDataFound">No Video.</span>

                    <div class="smallalbumcover">
                        <div class="mosaic-blocksmall mofade">
                            <div class="mosaic-overlay">
                                <div class="details">
                                    <p>
                                        <a href="/">test</a>
                                    </p>
                                </div>
                            </div>
                            <div class="mosaic-backdrop">
                                <img src="#"/>
                            </div>
                        </div>
                        <div class="clearfix">
                        </div>
                    </div>

                    <div style="margin-bottom: 1em; text-align: center; margin-top: 10px;">
                        <a style="text-decoration: none;" href="/vids"><span class="label label-info">View More</span></a>
                    </div>

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

                    <div class="well well-small" style="margin-bottom: 1px;">
                        <span>Recent P</span>
                    </div>

                    <span class="NoDataFound">No.</span>

                    <div class="smallalbumcover">
                        <div class="mosaic-blocksmall mofade">
                            <div class="mosaic-overlay">
                                <div class="details">
                                    <p>
                                        <a href="/">test</a>
                                    </p>
                                </div>
                            </div>
                            <div class="mosaic-backdrop">
                                <img src=""/>
                            </div>
                        </div>
                        <div class="clearfix">
                        </div>
                    </div>

                    <div style="margin-bottom: 1em; text-align: center; margin-top: 10px;">
                        <a style="text-decoration: none;" href="/aio"><span class="label label-info">View More</span></a>
                    </div>


            </td>
        </tr>
    </table>
</div>

​

Answer 1

Add this to your css and it will stay to the right:

.explore_recentAlbums {
    right: 0;     
}