Can't Prevent Nested Div's from Overflowing when using Percent Sizes and Padding in CSS?

Question

I want to be able to layout nested divs with these properties:

• width: 100%
• height: 100%
• padding: 10px<

Answer 1

I want it to be such that, the children are 100% width and height of the remaining space after padding is calculated, not before.

The shiny futuristic way to do that is:

#something {
    width: 100%; height: 100%; padding: 10px;
    box-sizing: border-box; -moz-box-sizing: border-boz; -webkit-box-sizing: border-box;
}

However this won't work on IE before version 8.

Do I have to resort to position:absolute and left/right/top/bottom?

That's another way, but ‘edge positioning’ (positioning top and bottom but not height, and similarly for left/right/width) won't work on IE before version 7.

the scrollbars are not the main issue, the fact that the child stretches beyond the width of the parent container is.

Horizontally it's not a problem. Leave width at default auto and it will receive the full width of its parent minus the paddings. The only problem is you don't get that behaviour with height.

A hybrid approach: auto-width, 100% height with box-sizing, and add some hack JS that only runs in IE6-7 to fix up the height there?