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

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

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.

I had a similar problem that I solved by using clip instead of overflow. This allows you to specify the rectangular dimensions of the visible area of your div (W3C Recommendation). In this case, you should specify only the area within the padding to be visible.

This may not be a perfect solution for this exact case: as the div's border is outside the clipping area, that will become invisible too. I got around that by adding a wrapper div and setting the border on that, but since the inner div must be absolutely positioned for clip to apply, you would need to know and specify the height on the wrapper div.

<div style="border: 1px solid red;
    height: 40px;">
    <div style="position: absolute;
        width: 100px; 
        background-color: #c0c0c0;
        padding-right: 20px;
        clip: rect(auto, 80px, auto, auto);">
        2222222222222222222222111111111111111111111111113333333333333333333</div> 
</div>

Wrap the div and apply padding to the parent

.c1 {
  width: 200px;
  border: 1px solid red;
  background-color: #c0c0c0;
  padding-right: 50px;
}
.c1 > .c1-inner {
  overflow: hidden;
}

<div class="c1">
  <div class="c1-inner">2222222222222222222222111111111111111111111111113333333333333333333
  </div>
</div>