css1/formatting_model/horizontal_formatting.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<HTML>
<HEAD>
<TITLE>CSS1 Test Suite: 4.1.2 Horizontal Formatting</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META http-equiv="Content-Style-Type" content="text/css">

<LINK rel="stylesheet" type="text/css" media="screen" href="../resources/base.css">
<STYLE type="text/css">
.ruler {padding: 0px; margin: 0px; border-width: 0px;}
P#ruled {background-color: aqua; width: 400px;
     border-style: solid; border-color: silver;
     border-top-width: 0px; border-bottom-width: 0px;
     border-left-width: 40px; border-right-width: 40px;
     padding-left: 40px; padding-right: 40px;
     margin-top: 0px; margin-bottom: 0px; margin-left: 40px; margin-right: 40px;}

P.one {margin-left: 10px;}
DIV.two {margin-left: 10px;}
P.three {margin-left: 0; width: 50%; margin-right: auto;
         background-color: gray;}
P.four {margin-left: auto; width: 50%; margin-right: auto;
        background-color: gray;}
P.five {margin-left: auto; width: 50%; margin-right: 0;
        background-color: gray;}
P.six {margin-left: auto; width: auto; margin-right: 0;
       background-color: gray; }
P.seven {margin-left: 0; width: auto; margin-right: auto;
         background-color: gray;}
P.eight {margin-left: auto; width: auto; margin-right: auto;
         background-color: gray;}
P.nine {padding-left: auto; padding-right: auto; margin-left: 0; margin-right: 0;
        width: 50%; background-color: gray;}
P.ten {margin-left: auto; width: 100%; margin-right: auto;
       background-color: gray;}
</STYLE>

</HEAD>

<BODY><P CLASS="one">
This paragraph should be indented ten pixels.
</P>

<DIV CLASS="two">
<P CLASS="one">
This paragraph should be indented twenty pixels, since horizontal margins do not collapse.
</P>
</DIV>

<P class="three">This element has a width of 50%, and due to 'auto'
values applied to the right margin, the element should be left
justified within its parent.  The gray rectangle should therefore
appear on the left edge of the viewport (e.g. the browser window). The
text inside the gray rectangle should not be centered.</P>

<P class="four">This element has a width of 50%, and due to 'auto'
values applied to the left and right margins, the element should be
centered within its parent.  The gray rectangle should therefore appear
in the middle of the viewport (e.g. the browser window). The text
inside the gray rectangle should not be centered.</P>

<P class="five">This element has a width of 50%, and due to 'auto'
values applied to the left margin, the element should be right
justified within its parent.  The gray rectangle should therefore
appear on the right edge of the viewport (e.g. the browser window). The
text inside the gray rectangle should not be centered.</P>

<P CLASS="six">
Since the width is "auto," the margins that are set to "auto" become
zero and this paragraph should have width 100% and the text should be
left justified.
</P>

<P CLASS="seven">
Since the width is "auto," the margins that are set to "auto" become
zero and this paragraph should have width 100% and the text should be
left justified.
</P>

<P CLASS="eight">
Since the width is "auto," the margins that are set to "auto" become
zero and this paragraph should have width 100% and the text should be
left justified.
</P>

<P CLASS="nine">
Since auto is an invalid value for padding, the right-margin of this
paragraph should be reset to <CODE>auto</CODE> and thus be expanded to 50% and it should only occupy the left
half of the viewport.
</P>

<P CLASS="ten">
Because this paragraph has width 100%, the auto margins become zero, so
it should not be centered.
</P>
</TD></TR></TABLE></BODY>
</HTML>