rbhatup rbhatup - 2 years ago 93
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
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.


Answer Source

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;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download