rbhatup rbhatup - 7 months ago 26
HTML Question

text-align right div + add padding-right without altering div width?

I have a div that looks like this:

<div style="width: 400px; height: 50px; text-align: right; padding-right: 50px">This is a test</div>


I need the text to have some space at the right, so I added
padding-right: 50px
. Then I notice the padding, but now the
div
is 450px instead of the original 400px.

How can I add those 50px of padding without altering the width of the div?

It would need to work in most major browsers. I've seen several examples, but they don't seem to work.

Thanks.

Answer

Inline styling, as requested:

<div style="box-sizing: border-box; width: 400px; height: 50px; text-align: right; padding-right: 50px; background: green">This is a test</div>

For CSS elsewhere:

*, :before, :after {
    box-sizing: border-box;
}