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

Hacienda

What exactly does not work as expected? – Orchestral

can you provide a jsfiddle? – Coupon

it works OK, if you mean the container div should expand the whole page width, you should remove the width declaration for it. – Zechariah

Like @Callidior, I'd love to know what exactly isn't working here. – Noteworthy

s30.postimg.org/x8tzg3xrl/Untitled_1.jpg Notice no padding. There is no reset on the CSS. – Hacienda

Try to reproduce the issue yourself on jsfiddle.net, because when I reproduce it with your code the padding works as one would expect. It's impossible to tell what the problem is from an image. – Noteworthy

jordan.rave5.com/fiscalclick JS Fiddle won't help a issue on my page if it works on JS Fiddle and not my page. – Hacienda

Which is exactly why you should try to reproduce it. If you can't reproduce it, and the bug is localised to your page, then you probably shouldn't be seeking help on SO. Your link is already obsolete because it doesn't even contain the problem elements any more! – Noteworthy

Stackoverflow is only for help on your own pages. Lol JS Fiddle is a new element to SO bud. If we were all here to make snippets work only on JS Fiddle and not your actual site where it's utlized, what's the point? There is none. If it works on JS Fiddle and not my website, that doesn't solve the problem, just furthers why it's not working. Lol You can also see below Smeegs explained why it wasn't working. – Hacienda

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.

Filigreed

Hmm I tried your code... and it seems like somehow... the background image is being pushed over to the left... s15.postimg.org/7sy95ofrv/Untitled_1.jpg – Hacienda

Tried my code? My code was an answer to your question. It wasn't a fix for anything it was a visualization of what padding does. – Filigreed

I know, it showed me the padding I wanted to see, but not sure why the 'background-image' position is off without any sort of position alteration. – Hacienda

Borders also add to the dimensions of a div. So the border of 1 adds 2 pixels to the height and width. – Filigreed

Yes, but not a 50+px gap. – Hacienda

I think your eyes are playing tricks on you. Open each image in a tab and switch back and forth. s15.postimg.org/7sy95ofrv/Untitled_1.jpg s30.postimg.org/x8tzg3xrl/Untitled_1.jpg The background doesn't move 50px. – Filigreed

Yeah, I know this. Doesn't explain a random 40+px gap without any positioning on it. :\ – Hacienda

That's cause it is still moved in both examples. It never changes, but the border is 40+px to the right of the end of the image. – Hacienda

That's the padding. try positioning the background image to the right. – Filigreed

How is padding pushing the background image of itself...? – Hacienda

Add this to your css background-position: center right; – Filigreed

It's not pushing the background image. by default the image is aligned to the left. When you add padding to the right the width grows and the border moves 50px to the right. But the background stays where it is because it's aligned left. – Filigreed

Weird, only ever seen the width change with margin... padding is inline. Going to mess with the background position. – Hacienda

padding extends the width of the div. It's a big issue. google "box-sizing" to read more about it. – Filigreed

Well, now that's sexy. I'll have to see if that holds true for other browsers. Edit: Thanks for all the help you pointed out a lot of things, and clarified others! – Hacienda

Most definitely, again, thanks for all the help. Very eye-opening. – Hacienda

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.

Foil