Changing scroll bar to the left of a div - html

Question

I'm bulding a Wordpress site that has a "box" for the main article. This is build using CSS and several Divs around the article. This all works fine, the only problem is that when I need a scroll bar, it apears outside of the right box border.
See for yourself (with awesome perfect red circle around it!).
Basically, I want it to stay IN the article, so in the left side of the last image (the right side border). I read around the internet, and I found that you can reverse the scroll bar using dir="rtl", but that will reverse all the scroll bars, and thats not really what I want.
[EDIT - To make it clear, I don't want it in the left side of the article itself, just inside the box on the right side of the text. This is sort of what I want, but as you see, it messes up the article box. I want it sort of in that position, but without screwing up the article.]
[End edit]
This is the CSS (this comes from a modded template, so excuse me if there are obvious errors):
.article {
margin-bottom:20px;
}
.article-corps-title {
background:url(images/article_sprite.png) no-repeat;
background-position:0 -17px;
min-height:70px;
max-height:142px;
position:relative;
}
.page-corps-title {
display:block;
/*background:url(images/article_sprite.png) no-repeat;
background-position: 13px -65px;*/
background:url(images/articlebox.png) no-repeat;
background-position:15px 0px;
height:80px;
}
.article-top {
position:absolute;
top:13px;
right:25px;
}
.article-top a {
display:block;
font-size:10px;
font-weight:700;
color:#aaa;
text-decoration:none;
padding:4px 12px 0 0;
background:url(images/icons.png) no-repeat;
background-position:top right;
}
.article-date {
position:absolute;
left:11px;
top:26px;
display:block;
width:40px;
text-align:center;
}
.article-date .month {
font-size:13px;
font-weight:700;
line-height:15px;
color:#FFF;
text-transform:uppercase;
}
.article-date .day {
font-size:22px;
font-weight:700;
color:#FFF;
}
h2.page-title {
text-align:center;
font-size:26px;
font-weight:700;
padding-top:10px;
padding-bottom:15px;
color:#000000;
text-shadow:#CCC 0 0 2px;
max-width:565px;
}
h2.article-title {
font-size:26px;
font-weight:700;
margin-left:80px;
padding-top:30px;
color:#ce0709;
text-shadow:#CCC 0 0 2px;
max-width:565px;
}
h2.article-title a, h2.page-title a {
color:#ce0709;
text-decoration:none;
}
h2.article-title a:hover,h2.page-title a:hover {
color:#E00
}
.article-meta-autor {
font-size:11px;
color:#aaaaaa;
margin-left:80px;
background:url(images/icons.png) no-repeat;
background-position:left -15px;
padding:4px 0 4px 20px;
max-height:11px;
line-height:14px;
}
.article-meta-autor a, .article-meta-keywords a, .article-meta-comments a {
color:#aaaaaa;
text-decoration:none;
font-weight:700;
}
.article-meta-autor a:hover, .article-meta-keywords a:hover, .article-meta-comments a:hover {
text-decoration:underline;
}
.article-corps {
position:relative;
/*background:url(images/article_sprite.png) repeat-y;
background-position:-683px 0px;*/
background:url(images/articleboxmiddle.png) repeat-y;
background-position:-5px 0px;
/*min-height: 250px;*/
height:300px;
margin-left:20px;
padding:13px 43px 0px 50px;
line-height:20px;
overflow:auto;/*hidden;*/
}
.article-read-more {
margin:0px auto;
width:164px;
padding-bottom:15px;
}
.article-read-more a {
display:block;
width:156px;
height:26px;
text-align:center;
padding-top:9px;
background:url(images/read_more.png) no-repeat;
background-position:top left;
font-weight:700;
color:#FFF;
text-decoration:none;
text-transform:uppercase;
}
.article-read-more a:hover {
background-position:bottom left;
}
.article-meta-keywords {
position:absolute;
bottom:0;
left:50px;
background:url(images/icons.png) no-repeat;
background-position:0 -34px;
padding-left:20px;
font-size:11px;
color:#aaa;
max-height:20px;
max-width:450px;
overflow:hidden;
}
.article-meta-comments {
position:absolute;
bottom:0;
right:45px;
background:url(images/icons.png) no-repeat;
background-position:0 -54px;
padding-left:20px;
font-size:11px;
color:#aaa;
}
.article-meta-keywords a {
color:#aaa;
font-weight:700;
text-decoration:none;
}
.article-meta-keywords a:hover {
text-decoration:underline;
}
.article-footer {
display:block;
/*background:url(images/article_sprite.png) no-repeat;
background-position:14px -15px;*/
background:url(images/articlebox.png) no-repeat;
background-position:15px -420px;
height:45px;
}
Thank you.

Answer 1

use dir="rtl" to give direction to the text. The scrollbars will appear to the left.
Then use dir="ltr" to the inside elements such as p, div etc to nullify the effect. This way, dir="rtl"
Here is the fiddle - http://jsfiddle.net/ashwyn/dcLQQ/
I works in Firefox though, but in my chrome it doesn't.
[Edit]
Below is the fiddle to shift the scrollbar slightly to the left-
http://jsfiddle.net/ashwyn/fPGy8/1/
I don't think there is any other solution that you can fix apart from the above.

Answer 2

this is not a solution to your problem but just a suggestion:
be aware that you're going against the standard behaviour your users would expect - a scrollbar always appears on the right for left-to-right languages, and this could be bad usability. As you are not creating a site that requires RTL, it would be better to not change the standard browser behaviour.

Answer 3

You haven't given enough code (structure) for me to give a specific answer, but it looks as though you could just narrow the div that contains the article.