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.