You’re viewing an archive of outdated material. Visit The Web Standards Project’s updated site to learn about our current mission.

Margin problems (2)

The following is the stylesheet for this document.

     DIV         { height: 2em; border: 2px purple solid; }
     .centerhalfwidth { width: 50%; margin-left: auto; margin-right: auto; }
     .righthalfwidth { width: 50%; margin-left: auto; margin-right: 0; }
     .rightautowidth { width: auto; margin-left: auto; margin-right: 0; }
     img.rightautowidth { display: block; }

Note that because MacIE does not support multiple keywords for classes, the above contains a lot of redundancy.

Centering

The following DIV is of classes centerhalfwidth and should therefore span half the width of the page, and be centered.

Right Alignment

The following DIV is of classes righthalfwidth and should therefore span half the width of the page, and be right aligned.

Full Width

The following DIV is of classes rightautowidth and should therefore span the whole width of the page. (The margin-left would be set to 0 and the width would be set so as to fit the element in the containing block.)

Intrinsic Width

The following is an IMG element with intrinsic width. It is of classes rightautowidth and should therefore be right-aligned. (The width would be set to the intrinsic width of the element and margin-left would be set so as to fit the element in the containing block.) [Note: This testcase originally had an error, but was corrected on 2000-03-09. The image must have display: block.]