parent, width:400px
width: 100%
width: 50%
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%

This page is the standard mode version of IE, percentage width and box model - quirks.

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
w: 100%, m-l: 50px
w: 100%, m-l: 100px
w: 50%, m-l: 50px
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

CSS tests home