When scrolling, the bootstrap affix is anchored to the very left side

I'm struggling with keeping a fixed div on the right side of the screen within a container. Every time I try to scroll, it just moves all the way to the left. Any assistance is appreciated.

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>

​

htmlcsstwitter-bootstrap

Answer №1

Here is a simple CSS code snippet that will keep the element aligned to the right side:

.explore_recentAlbums {
    float: right;     
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Locate an original identifier using Selenium WebDriver

In search of a distinctive identifier for the "update profile picture button" on my Facebook account to utilize it in automation testing with Selenium WebDriver and Java. I attempted driver.findElement(By.className("_156p")).click();, but unfortunately, i ...

javacssxpathselenium-webdriver

Splitting a CSS hierarchical list into horizontally aligned levels of hierarchy

I am trying to horizontally lay out an ordered list with multiple top level nodes while preserving the vertical layout of child nodes. For example, consider a basic list structure like this: <ol> <li>Top 1 <li>Sub 1</li ...

htmlcss

Local cross-origin requestsORCross-origin requests within local

I'm having an issue with a simple setup that I can't seem to figure out: This is my index.html file: <!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <title>SyriLab</title> <link rel="stylesheet" ...

javascriptjqueryhtmlbootstrap-4

The Angular Function has stopped working out of the blue following the implementation of Jquery Ajax

As a newcomer to php programming, I am facing an issue with my Angular Function not functioning properly when incorporating a jQuery ajax method post to update values in the database. Below is my angular code within HTML: <tfoot ng-app="kembalianApp" ...

phpjqueryhtmlangularjsajax

Does a browser's cache utilize storage for XMLHttpRequest responses?

I have a question regarding browsers in general, with a focus on Chrome. Imagine I have the following code snippet in my file, index.html: <img src='//path/to/foo.img'></img> The file foo.img changes on my server every hour. I woul ...

javascripthtmlcssgoogle-chromecaching

Adjust the positioning of a class element

I have an eye icon that changes position when clicked. Initially, it is set to left: 10%;, but if there is a DOM element with the ID login-section, it should be repositioned to left: 50%;. I attempted to use document.getElementsByClassName('fa-eye-sl ...

javascripthtmlcss

Image control failing to display SVG file

I am facing an issue with displaying an SVG file on the img control in angular10. When I try to use SVG, it's not showing up but it works fine when I change the file type to jpg for the same control. The img control is placed inside a nav bar. Here i ...

htmlcssangulartwitter-bootstrapsvg

Trouble in Paradise: Woocommerce Product Grid in Disarray

Currently working on a WordPress WooCommerce website and encountering an issue with the product listing. Despite trying various plugins and CSS adjustments, I am unable to correct the positioning problem. Strangely, everything seems to be functioning prope ...

htmlcsswordpresswoocommerce

How to add an 'alt' text tag to a background image sprite

I have a button that opens a new browser window, so I've added alternate_text and title tags to notify the user that a NEW window will open when hovered over. <img class="mp3PlayBtn" alt="Mp3 player opens in popup window" title="Mp3 player opens i ...

htmlcssaccessibilitycss-sprites

Choosing options from two separate dropdown menus with the same CSS class name using JavaScript or jQuery: A guide

I am looking to update the values of two dropdowns using the same CSS properties, similar to the design shown in the attached image. Here is the HTML code snippet for reference: <div class="container-fluid" role="main" style="margin-top: 100px;"> ...

javascriptjqueryajaxhtml

Utilize CSS to vertically align buttons

One of my current projects involves creating a panel with buttons organized in columns side by side, similar to the layout shown below: https://i.sstatic.net/ObAqw.png However, I am struggling to achieve this desired arrangement. Below is the code I hav ...

javascripthtmlcssforms

Managing time intervals and scoping challenges in a Jquery plugin

Currently, I am in the process of creating a simple JQuery plugin with a specific functionality. My goal is to pass a single element like $("div").applyPlugin(); and have it loop through each selector provided, setting an interval that is unique to that in ...

javascriptjqueryhtmlscope

Error 404: The requested file could not be located on the MAMP server

Whenever I try to access a PHP file on MAMP, I keep getting a 404 error message. The error reads: "The requested URL /‘welcome.php’ was not found on this server." Oddly enough, both the HTML and PHP files work perfectly fine when accessed via localho ...

phphtmlformshttp-status-code-404mamp

Transforming global CSS into CSS modules: A step-by-step guide

In my nextjs project, I am utilizing react-bootstrap and bootstrap which requires me to include the global css: // _app.js import 'bootstrap/dist/css/bootstrap.min.css'; The issue arises when loading a significant amount of unused css on every p ...

cssreactjswebpackbootstrap-4next.js

Tailwindcss's responsive design suffers from sluggish performance

Currently, I am working on creating a blog using Next.js and I am looking for a way to display or hide the Table of Contents (TOC) based on responsiveness requirements. Although I am utilizing Tailwind CSS for styling, I am experiencing slow reactions. I ...

cssreactjsnext.jsresponsive-designtailwind-css

Including a drop-down arrow or triangle next to the initial button

In the navigation bar displayed below https://codepen.io/shaswat/pen/XzpRXL Is it possible to create a down triangle or arrow next to the "home" link, which changes direction upward when hovered over? How can this be achieved without modifying any HTML e ...

htmlcss

Struggling to align a div at the center of a screen

Snippet of HTML Code: <body> <!-- Social Media Icons --> <div id="sm1"><a href="/"><img src="images/facebook.png" height=40 width=40></img></a> </div> <div id="sm2"><a href="/"><img src="image ...

htmlcsscenter

Troubleshooting the issue with dynamically adding form fields in AngularJS

I am currently working on an online course application and facing an issue with adding form fields dynamically to include additional video lectures for each course. When I attempt to click on the "Add Another URL" button, nothing happens. https://i.sstatic ...

javascriptangularjshtmlangularjs-directiveangularjs-scope

I aim to toggle the visibility of input fields upon clicking a button

Form.html <form [formGroup]="myForm"> <ion-button [(ngModel)]="isActive"(click)="onClick()" >Add</ion-button> <ion-item> <ion-label position="floating">First Name</ion-label&g ...

htmlcssangularionic-frameworkionic4

Tips for resolving the issue of a Bootstrap dropdown menu overlapping content in its vicinity

I am trying to position a Bootstrap dropdown button on the right-hand side of the page. The dropdown should cover 100% of the page's width and overlay any content when activated. However, there is a large logo on the left-hand side that I want users t ...

javascriptjqueryhtmlcssbootstrap-4