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> </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.