23

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

0

5 Answers 5

44

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.

3
  • 3
    Great solution. Only problem is I'm already using the border property to add a 1px border so this won't work in my particular case.
    – Aaron
    Oct 25, 2011 at 23:06
  • 1
    Aaron, just add an extra div that will act as an inner wrapper Feb 18, 2013 at 3:41
  • or use 1px divs for borders
    – SPillai
    May 17, 2013 at 18:35
29

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

1
  • This answer is almost certainly more effective than the currently chosen one. Dec 28, 2015 at 15:53
3

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>
1

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>

0

If you have a right-adjacent element to the one in question, put padding on its left. That way the content from the left element will flow up to but not past its margin, and the left padding on the right-adjacent element will create the desired separation. You can use this trick for a series of horizontal elements which may have content that needs to be cut off because it is too long.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.