Right padding on absolutely positioned scrolling div

I have an absolutely posit开发者_Go百科ioned parent div who's top, right, bottom and left attributes all equal 0px so that it resizes with the browser. If it's contents exceeds the document width or height then it displays scrollbars (as it should in this application).

This parent div also has top, right, bottom and left padding of 20px so that there is always a white margin around it's contents.

This parent contains another div that for test reasons is set to 2000px X 2000px and has a different background colour to the parent.

Now the parents top, bottom and left 20px padding is working fine, but the right padding isn't appearing, which is confusing the hell out of me. This peculiarity is happening across all modern browsers, so it must be something serious I'm missing.

<div id="parent" style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; padding: 20px; overflow: auto; background-color: #FFFFFF;">

    <div id="child" style="width: 2000px; height: 2000px; background-color: #666666;">

        This divs width and height is deliberately set higher than the document/window width to cause the parents scrollbars to appear. 

    </div>

</div>

So, question is: how can I get the right padding of the parent to apply?

---

This is how the box model works. The inner child div is larger than its parent, so it's overflowing past the right/bottom edges of the parent. If you put a border around the parent div (border: 1px solid red) you'll see the parent properly taking up the entire browser window.

I don't know how you're getting bottom padding working, as right/bottom for me are both covered up by the child's grey on both FF4 and Chrome.

If you want the child element to be contained fully within the parent without overflow, you'd need to make it a relative size, not an absolute pixel size.

---

Remove padding: 20px; from the parent div, and add display:inline-block;margin:20px; to the inner div. Tested in IE7+, Firefox 5.0, and Chrome.

Following is the resulted HTML:

<div id="parent" style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; overflow: auto; background-color: #FFFFFF;">
    <div id="child" style="width: 2000px; height: 2000px; background-color: #666666; display:inline-block; margin:20px;">
        This divs width and height is deliberately set higher than the document/window width to cause the parents scrollbars to appear. 
    </div>
</div>