text-align right and padding right

Question

I've seen this posted everywhere, with no real help, or it being closed for no reason other then moderators feeling it would be 'unhelpful' in the future even though google whips up a nice result summing some 55,000+ relevant results.

So, why won't padding-right work with a parent, and text-align right child?

.rightcbar {
    display: block;
    font-family: 'Roboto', sans-serif;
    text-shadow: 0px 0px 20px #dbd69d;
    padding-right: 50px;
    height: 152px;
    width: 592px;
    line-height: 152px;
    background: url(rightcbar.png) no-repeat;
}

.rightcbar .rightctext {
    display: inline-block;
    width: 100%;
    text-align: right;
    font-size: 25px;
    color: #f3f1de;
    font-size: 25px;
    font-family: 'Roboto', sans-serif;
    text-shadow: 0px 0px 10px #aaa;
    -webkit-font-smoothing: subpixel-antialiased;
}

The HTML

<div id="rightc">
    <div class="rightcbar">
        <div class="rightctext">Test</div>
    </div>
    <div class="rightcbar">
        <div class="rightctext">Test</div>
    </div>
    <div class="rightcbar">
        <div class="rightctext">Test</div>
    </div>
</div>

Smeegs helped explain exactly why things were not working as I was intending below; if you are interested. Here is the revised, and working code.

.rightcbar {
    display: block;
    font-family: 'Roboto', sans-serif;
    text-shadow: 0px 0px 20px #dbd69d;
    padding-right: 50px;
    height: 152px;
    width: 592px;
    line-height: 152px;
    background: url(rightcbar.png) no-repeat;
    background-position: center right;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;    
}

.rightcbar .rightctext {
    display: inline-block;
    width: 100%;
    text-align: right;
    font-size: 25px;
    color: #f3f1de;
    font-size: 25px;
    font-family: 'Roboto', sans-serif;
    text-shadow: 0px 0px 10px #aaa;
    -webkit-font-smoothing: subpixel-antialiased;
    cursor: pointer;
}

Live example

Answer 1

I think I understand your confusion.

What (I think) you're asking is why when you add padding to the left, it moves the content, but not when you add it to the right.

The answer is that padding makes the width of the div grow. So when everything is to the left (padding and text-align), the div gets wider and and the content is moved.

But when everything is to the right (padding and text-align) nothing moves...right? Wrong.

The div grows to the right the correct number of pixels adding the padding. And the content stays where it is because the offset is happening AFTER the content, not before like when you left align. It's easy to visualize with a border added.

Here is the code with no padding

http://jsfiddle.net/z5PJx/1/

You can see that the text is right up on the edge.

Here is the same code with padding-right: 50px;

http://jsfiddle.net/z5PJx/2/

Two things happened.

1. The div grew by 50px;
2. The content was moved left by 50px;

Those changes offset, and the content doesn't move.

In both situation the div's width grows to the right. But the direction of the padding changes.

Answer 2

Try this, on the container holding your text

.rightctext{ box-sizing: border-box; padding-right:10px;}

The box-sizing property will force the container object to take the padding on the right into account.

Hopefully that's what you're looking to achieve. *Note, adjust the px accordingly.