97

Given this simple structure:

<div id="parent">
    <div id="child">Lorem ipsum</div>
</div>

with this CSS:

#parent {
    width: 200px;
    height: 200px;
    padding: 20px;
    overflow-x: scroll;
}

#child {
    width: 500px;      
}

Live demo: http://jsfiddle.net/523me/5/

Notice that the parent has a 20px padding and that the child overflows horizontally (because it is wider). If you scroll the parent all the way to the right, you'll see that the child touches the right edge of the parent.

So, the parent should have a right padding, but it is ignored. It seems that when the child has a fixed width, the right padding of the parent does not apply. (Is this specified by a standard? I would love to know. Please let me know if you find anything!)

Is there a way to force the right padding to be applied in this scenario without having to remove any of the elements from the flow (by floating or positioning)?

enter image description here

Screenshot 1 - The right padding is ignored. This is how all current browsers behave.

Screenshot 2 - The right padding applies. This is what I'm trying to accomplish. (Btw, the screenshot is from IE7, which is the only browser which does not ignore the right padding.)

1
  • Is this issue still happening? Commented Aug 18, 2021 at 12:06

7 Answers 7

55

You're suffering from this problem.

I would solve it by giving a margin to the child (and not a padding to the parent):

body {
  padding: 2em;
}

#parent {
  width: 200px;
  height: 200px;
  overflow-x: scroll;
  background: gray;
}

#child {
  width: 500px;
  background: yellow;
  margin: 20px;
  display: inline-block;
}
<div id="parent">
  <div id="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et turpis eu lorem consectetur blandit sed vel ligula. In lorem ligula, lacinia sed aliquet sed, congue quis tortor. In sed magna eros, eget blandit arcu. Nulla sit amet volutpat ipsum. Duis
    quis nisl massa. Sed ipsum magna, tempus non malesuada in, gravida et sapien. Fusce a odio nulla, quis ultrices mauris. Maecenas in tellus id massa fringilla molestie.</div>
</div>

7
  • 24
    It is interesting that it needs the inline-block to work, as block does not do it, yet one would think it would. +1 for the link showing research.
    – ScottS
    Commented Apr 7, 2012 at 14:46
  • 1
    @ScottS Yeah, it's the damn browsers, they all have their own interpretations of the CSS specification, as much as they try to uphold it (except the non-standard rogue mess that is IE). block and its buddy inline-block should share all of their box-model features and differentiate only by inline-block's way of not obstructing page flow and mingling with inline stuff. I'd certainly like to find out more about this specific behavior.
    – user1309389
    Commented Apr 7, 2012 at 15:00
  • 1
    @Jota display:inline-block risks having two children with small content appear side-by-side: jsfiddle.net/523me/20 +1 from me also for the link. Commented Apr 7, 2012 at 15:02
  • @ŠimeVidas--depending on your application intentions, you could solve the small content issue with a min-width.
    – ScottS
    Commented Apr 7, 2012 at 15:08
  • @ŠimeVidas Yes, that case! Maybe maintaining the blockiness of the child and give it a container for its content: demo
    – Joao
    Commented Apr 7, 2012 at 15:27
9

Dunno but adding:

#child{
  display: inline-block;
}

Seems to fix it: http://jsfiddle.net/523me/6/

I've only tested in latest Chrome, may not be cross-browser

1
  • 1
    If I'm not mistaken, inline-block is used to place block elements directly/inline with the text (or inline elements), intermixing it. So the parent block might resolve it as it would regular text, and relative to it, parent padding goes the evident 20px around it. But this is more of a hack, that's why it doesn't work in Firefox. Its usage is for specific logical cases where such a layout is preferable.
    – user1309389
    Commented Apr 7, 2012 at 14:29
9

You might change the padding to a border.

padding: 20px;

to

border: 20px solid gray;
3
  • 5
    The border wraps the scroll-bar which does not look good: jsfiddle.net/523me/17 Commented Apr 7, 2012 at 14:50
  • 1
    This workaround worked for me. I set the border color to a trasparent one. Upvoted!
    – FonzTech
    Commented Feb 4, 2020 at 17:06
  • yeah transparent border is still elegant and readable code than having another else, thanks
    – Nald Dev
    Commented Jan 31, 2021 at 0:46
5

No, the padding is not ignored, but it's still inside the parent.

See updated jsFiddle, where you can see that the padding hasn't moved from its original position.

Edit: Hm, there are some anomalies. If you give the inner div a right margin, that gets ignored too. Hm. Upvoting your question.

1
  • I see what you mean. Well, it is what it is, but I don't like it. I would be happier if the padding of the parent were wrapped around the widest child, instead of applying only to those children which don't have a fixed width. Commented Apr 7, 2012 at 14:26
0

Apply padding-right to overflowing element itself, and move background to its direct child element.

<div id="parent">
    <div id="child"><div>Lorem ipsum...</div></div>
</div>

<style>
#parent {padding-right: 0; }
#child {padding-right: 20px; }
#child > DIV {background: yellow; }
</style>

http://jsfiddle.net/523me/9/

0
0

You could add a right margin to the last child. Something like:

shared-client-logos shared-client-logo:last-of-type img {
margin-right: 20px; }

I know this works because I've just used it (this will add 20px margin to the right of any image within the last shared-client-logo element within the shared-client-logos tag).

0

Alternativrely you can make flex container:

#parent {
  width: 100%;
  height: 140px;
  overflow-x: scroll;
  background: blue;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
#wrapper {
  flex: 1 1 auto;
  padding: 12px;
}
#child {
  background: yellow;
  width: 5000px;  
  height: 100%;   
}
<div id="parent">
  <div id="wrapper">
    <div id="child">Lorem ipsum</div>
  </div>
</div>

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.