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 puts IE in quirks mode. Here a width includes padding and border (border-box width). But a percentage width on a child does not use as reference the border-box of the parent.

Similar cases as above, but with some margins on the child boxes. These show that a percentage width is not even computed on the basis of the content-box of the parent, but on the available width, i.e. the content box of the parent minus the child horizontal margins. So width:100% is the same as with:auto for a normal box (except that 100% adds hasLayout).

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

This page in standard mode: IE, percentage width and box model - standards. A similar page testing height instead of width IE/Quirks, percentage height and box model: the behavior is slightly different since the percentage is computed on the basis of the content-box of the parent.

CSS tests home