I need to position the CSS vertical scrollbar on the right side of the page

I can't figure out how to move the vertical scrollbar to sit on the right side of my site's work page. Any help would be greatly appreciated.

Below is the provided HTML code:

   <div class="heading">

   <h1>PRINT</h1>

    <div class="scrollbar" id="style-6">
  <div class="force-overflow">
  </div>
   </div>

   </div>

   <p>&nbsp;</p>



   <div class="blog-container">

<div class="work_thumbs">
  <li class="print">
    <div><a href="Work/Tree Top News/treetopnews.html"><img src="../Images/Tree Top News/Thumbs/TTN2.jpg" alt="Tree Top" border="0" class="thumb">TREE TOP NEWS</a></div>
  </li>

      <li class="print">
    <div><a href="Work/Harrow Council/harrowcouncil.html"><img src="../Images/Harrow Council/Thumbs/Harrow Logo.jpg" alt="Harrow Council" border="0" class="thumb">HARROW COUNCIL</a></div>
  </li>

      <li class="print">
    <div><a href="Work/Regent Care/regentcare.html"><img src="../Images/Regent/Thumbs/Regent logo.jpg" alt="Regent Care" border="0" class="thumb">REGENT CARE SERVICES</a></div>
  </li>

      <li class="print">
    <div><a href="Work/NLCS/nlcs.html"><img src="../Images/NLCS/Thumbs/NLCS Logo2.jpg" alt="NLCS" border="0" class="thumb">NLCS</a></div>
  </li>

     <li class="print">
    <div><a href="Work/Aish/aish.html"><img src="../Images/Aish/Thumbs/AHC.jpg" alt="Aish" border="0" class="thumb"> AISH</a></div>
  </li>

     <li class="print">
    <div><a href="Work/Dental Perfection/dentalperfection.html"><img src="../Images/Dental/Thumbs/Dental Perfection Logo.jpg" alt="Dental Perfection" border="0" class="thumb"> DENTAL PERFECTION</a></div>
    </li>

     <li class="print">
    <div><a href="Work/FJL/fjl.html"><img src="../Images/FJL/Thumbs/FJL Logo.jpg" alt="chicago graphic design" border="0" class="thumb">FJL</a></div>
     </li>

                  <li class="print">
    <div><a href="Work/Canons High/canonshigh.html"><img src="../Images/Canons high/Thumbs/Canons.jpg" alt="Canons high school" border="0" class="thumb">CANONS HIGH SCHOOL</a></div>
     </li>

                   <li class="print">
    <div><a href="Work/NCSY/ncsy.html"><img src="../Images/NCSY/Thumbs/NCSY cover.jpg" alt="NCSY" border="0" class="thumb">NCSY</a></div>
  </li>

                  <li class="print">
    <div><a href="Work/Graham Allcott/grahamallcott.html"><img src="../Images/Graham Allcott/Thumbs/GA.jpg" alt="NCSY" border="0" class="thumb">GRAHAM ALLCOTT</a></div>
  </li>

The CSS for styling is as follows:

     #info
    {
font-size: 18px;
color: #555;
text-align: right;
margin-bottom: 25px;
    }

    a{
color: #074E8C;
    }

    .scrollbar
    {
margin-left: 0px;
float: right;
height: 300px;
width: 25px;
left: 200px;
background: #F5F5F5;
overflow-y: scroll;
margin-bottom: 25px;
    }

    .force-overflow
    {
min-height: 450px;
    }



    /*
     *  STYLE 6
     */

    #style-6::-webkit-scrollbar-track
    {
background-color: #F5F5F5;
    }

    #style-6::-webkit-scrollbar
    {
width: 10px;
background-color: #F5F5F5;
    }

    #style-6::-webkit-scrollbar-thumb
    {
background-color: #F90; 
background-image: -webkit-linear-gradient(45deg,
                                          rgba(255, 255, 255, .2) 25%,
                                                  transparent 25%,
                                          transparent 50%,
                                          rgba(255, 255, 255, .2) 50%,
                                          rgba(255, 255, 255, .2) 75%,
                                          transparent 75%,
                                          transparent)
    }

    .blog-container {
  min-height: 100%;
  width: 700px;
  margin-top: 45px;
   background-color: #FFF;
display: table;
   content: '';
  clear: both;
     }

    .work_thumbs {
width:1000px;
margin: 0px auto 0 auto;
float: left;
    }

    .work_thumbs li {
margin: 0px 15px 15px 0px;
list-style-type: none;
display: block;
float: left;
display: inline;
font-family: "geogtq rg", Helvetica;
color: #FFF;
overflow: hidden;
    }

    .work_thumbs li a {
float: inherit;
display: block;
width: 230px;
padding-bottom: 20px;
font-family: "geogtq rg", Helvetica;
color: #00BDE5;
height: 180px;
border: 1px solid #02BDE5;
overflow: hidden;
text-align: center;
font-size: 17px;
    }

    .work_thumbs li .type {
color: #01BDE6;
    }

    .work_thumbs li a:hover {
background-color: #ceeef6;
border-bottom: 1px solid #02BDE5;
text-decoration: none;
color: #007789;
font-family: "geogtq rg", Helvetica;
text-align: centre;
font-size: 17px;
    } 

    .work_thumbs li .thumb {
margin-bottom: 15px;
display: block;
    }

Any assistance on this matter would be greatly appreciated. Thank you in advance.

Answer №1

After reviewing your code, I noticed some markup issues:

Here is a suggestion - try this fiddle

CSS changes made: .scrollbar { margin-left: 0px; float: right; height: 300px; left: 200px; background: #F5F5F5; overflow-y: scroll; margin-bottom: 25px; }

    .force-overflow
    {

    }

Also, please note the html change from

<div class="scrollbar" id="style-6">
  <div class="force-overflow">
  </div>
   </div>

   </div>

to

    <div class="scrollbar" id="style-6">
  <div class="force-overflow">
  </div>

I have shifted the two closing div tags lower down on the page. Does this meet your requirements?

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

How to position ul at the bottom of a fixed div

I have a fixed sidebar with two ul elements. I attempted to position the blue ul at the bottom of the fixed div, but it is not aligning as intended. <div class="sidebar"> <ul style="background:green;"> <li>test</li> <li>test ...

Exploring the Transition from React.js with Material UI to Next.js for Server-Side Rendering: A Comparison of Tailwind CSS, Material UI, and Chakra UI

Currently, I am in the process of moving my React.js application with Material UI components to Next.js for server-side rendering (SSR) while considering some UI changes. In my research, I have come across three UI frameworks: Material UI, Chakra UI, and T ...

When clicking on the text areas, the Twitter-Bootstrap drop-down login automatically closes

Greetings! I am currently working on my first website design using JQuery. My project includes a dropdown login box created with Twitter-Bootstrap. Unfortunately, I'm facing some challenges with the JQuery script that controls the behavior of the logi ...

Inconsistent expansion panel widths observed in Chrome when using React material-ui

I've encountered an issue in Chrome where the width adjusts to fit its content instead of taking up the full width of the container. However, this problem does not occur on Firefox. https://i.stack.imgur.com/HyWGU.png When I click on the expand icon ...

The correct way to use the useState hook for implementing an icon in React

My attempt at implementing a feature in React allows users to see active feedback on the screen by changing its icon when clicked. How can I make it change to another icon (e.g. from Box to BoxChecked) once it is clicked? Note: I believe this code line i ...

The Sticky Navigation Bar Disappears After a Certain Scroll Point

Looking for some help with my website's navbar - it works fine until I scroll past the blue section, then it disappears along with other elements. Any suggestions on how to fix this? Thanks! <!DOCTYPE html> <html lang="en"> <h ...

What is the best way to eliminate the space between the website's border and the image?

Is there a way to eliminate the space between the left and right borders? I want the picture to fill 100% of the browser window. https://i.stack.imgur.com/gqgOs.png img.test { display: block; outline: 0px; padding: 0px; margin: 0px; } <img c ...

Executing Javascript in Python Environment

I'm currently working on developing an HTML document parser using Python. Since I have a strong understanding of jQuery, I am interested in leveraging its traversal capabilities to parse these HTML files and then send the gathered data back to my Pyth ...

What could be causing my widget to not function properly with Django and Bootstrap?

I am currently working with the following Boostrap code in my HTML: <div class="input-group date col-2" id="datetimepicker1" data-target-input="nearest"> {{form.data_contabile|as_crispy_field}} <div class="input-group-append" data-target="# ...

Is it feasible to verify for vacant dates with a single click?

Is there a way to determine if a date value is empty, and if it is, display a popup indicating so? After some research, I stumbled upon a similar issue where the date value was always filled with a default "mm/dd/yyyy" value. The solution provided involv ...

How to implement an 8-column layout within a 12-grid bootstrap framework?

Hey guys, so I've been trying to recreate this page with Bootstrap and it's all going smoothly except for this one part. Here is the link I'm referring to: I have 2 questions: Which HTML element should I use for these lines? Any idea on h ...

Remove dynamically inserted list item using a button

I have dynamically created an unordered list (<ul>) that adds list items (<li>) when a button is clicked, along with a remove button. Initially, the default list item should not contain a remove button so I added it in the script. SCRIPT $(d ...

What is the most efficient way to transform HTML into React components effortlessly?

I have been attempting to automate the process of converting HTML into React components. I followed the link below to automatically convert HTML into React components: https://www.npmjs.com/package/html-to-react-components However, I encountered an issue ...

Learn how to toggle the display of a div using jQuery, just like the functionality on the popular website

Visit Mashable here Below is the script I am currently using: $(document).ready(function(){ $(".show_hide5").mouseover(function(){ $('.selected').removeClass('selected'); $(this).next().fadeIn("slow").addClass(&apo ...

Avoid activating the hover state

Is there a way to prevent a button, div, or li from hovering if it already has an active status using CSS? #list-of-tests .item-test:hover:not(.active) { background-color: #4d5f75; border: solid 1px #4d5f75; } #list-of-tests .item-test:active { ...

Two interactive dropdown menus featuring custom data attributes, each influencing the options available in the other

Looking to create interactive select boxes based on the data attribute values? This is the code I currently have: HTML <select id="hours" onchange="giveSelection()"> <option value="somethingA" data-option="1">optionA</option> <o ...

Preserving information throughout an online browsing session

Is there a way to save the data about which buttons a user clicked on while visiting our website without using a database? The issue is that any array I use gets reset every time the user is redirected from the page. Note: I'm still learning PHP ...

ion-grid featuring alternate columns

As someone who is not very familiar with Angular, I am trying to create a grid layout like the one shown here: https://i.stack.imgur.com/nBavk.png The desired layout includes alternating rows with one image followed by two images. My current attempt at a ...

Creating a contact form in WordPress that triggers a separate PHP file

I've been working on integrating a small contact form into the sidebar of my WordPress site. After moving the code from its original HTML file to the appropriate WordPress PHP files, everything seems to be functioning correctly except for the contact ...

Displaying PHP processes within a DIV instantly using JQUERY, without the need to wait for them to complete

I currently have two scripts that I am working with. My goal is to use jQuery to send a form to a PHP file and display the process in a DIV. However, there is a delay in showing the progress until it completes, which can sometimes take a few seconds, caus ...