parent, width:400px; padding-left: 100px
width: 100%
width: 50%
parent, width:400px; padding: 0 50px
width: 100%
width: 50%
parent, width:400px; border-left-width: 100px
width: 100%
width: 50%
Similar cases as above, but with some margins on the child boxes. In IE6 the children cause some expansion of the parent box (the percentage width remain computed on the basis of the not expanded box, otherwise there would be a sort of expansion loop...).
parent, w:400px; padding-left: 100px
w: 100%, m-l: 50px
w: 100%, m-l: 100px
w: 50%, m-l: 50px
parent, w:400px; padding: 0 50px
w: 100%, m-l: 50px
w: 100%, m-l: 100px
w: 50%, m-l: 50px
parent, w:400px; border-left-w: 100px
w: 100%, m-l: 50px
w: 100%, m-l: 100px
w: 50%, m-l: 50px