How can I force overflow: hidden to not use up my padding-right space

Question

I have the following code:

<div style="width: 100px; 
overflow: hidden; 
border: 1px solid red; 
background-color: #c0c0c0;
padding-right: 20px;
">
2222222222222222222222111111111111111111111111113333333333333333333</div>

(XHTML 1.0 transitional)

What happens is that the padding-right doesn't appear, it's occupied by the content, which means the overflow uses up the padding right space and only "cuts off" after the padding.

Is there any way to force the browser to overflow before the padding-right, which means my div will show with the padding right?

What I get is the first div in the following image, what i want is something like the 2nd div:

image

Answer 1

Your best bet is to use a wrapping div and set the padding on that.

Answer 2

I have the same problem with the overflow:hidden; obeying all the padding rules, except for the right hand side. This solution works for browsers that support independent opacity.

I just changed my CSS from:

padding: 20px;
overflow: hidden;

to

padding: 20px 0 20px 20px;
border-right: solid 20px rgba(0, 0, 0, 0);

Having container divs works fine, but that effectively doubles the amount of divs on a page, which feels unnecessary.

Unfortunately, in your case this won't work so well, as you need a real border on the div.