visudet.html

CSS lets learn this step by step...

<dd>Specifies a fixed width.
<dt><span class="index-inst" title="&lt;percentage&gt;"><a name="x3" href="syndata.html#value-def-percentage" class="noxref"><span class="value-inst-percentage"><strong>&lt;percentage&gt;</strong></span></a></span>
<dd>Specifies a percentage width. The percentage is calculated
with respect to the width of the generated box's 
<a href="visuren.html#containing-block">containing block</a>.
<dt><strong>auto</strong>
<dd>The width depends on the values of other properties. 
See the sections below.
</dl>

<P>Negative values for <a href="visudet.html#propdef-width" class="noxref"><span class="propinst-width">'width'</span></a> are
illegal. 

<div class="example"><P style="display:none">Example(s):</P><P>
For example, the following rule fixes the content width of paragraphs
at 100 pixels:</p>

<PRE>
P { width: 100px }
</PRE>
</div>

<H2>10.3 <a name="Computing_widths_and_margins">Computing widths and
margins</a></H2>

<p>The computed values of an element's <a href="visudet.html#propdef-width" class="noxref"><span
class="propinst-width">'width'</span></a>, <a href="box.html#propdef-margin-left" class="noxref"><span
class="propinst-margin-left">'margin-left'</span></a>, <a href="box.html#propdef-margin-right" class="noxref"><span
class="propinst-margin-right">'margin-right'</span></a>, <a href="visuren.html#propdef-left" class="noxref"><span
class="propinst-left">'left'</span></a> and <a href="visuren.html#propdef-right" class="noxref"><span
class="propinst-right">'right'</span></a> properties depend on the type of
box generated and on each other. In principle, the computed values are the same
as the specified values, with 'auto' replaced by some suitable value,
but there are exceptions. The following situations need to be
distinguished:</p>

    <ol>
      <li>inline, non-replaced elements
      <li>inline, replaced elements
      <li>block-level, non-replaced elements in normal flow
      <li>block-level, replaced elements in normal flow
      <li>floating, non-replaced elements
      <li>floating, replaced elements
      <li>absolutely positioned, non-replaced elements
      <li>absolutely positioned, replaced elements
    </ol>

<P>Points 1-6 include relative positioning.

<h3><a name="q4">10.3.1 Inline, non-replaced elements</a></h3>

<p>The <a href="visudet.html#propdef-width" class="noxref"><span class="propinst-width">'width'</span></a> property does not
apply.  A specified value of 'auto' for <a href="visuren.html#propdef-left" class="noxref"><span
class="propinst-left">'left'</span></a>, <a href="visuren.html#propdef-right" class="noxref"><span
class="propinst-right">'right'</span></a>, <a href="box.html#propdef-margin-left" class="noxref"><span
class="propinst-margin-left">'margin-left'</span></a> or <a href="box.html#propdef-margin-right" class="noxref"><span
class="propinst-margin-right">'margin-right'</span></a> becomes a computed
value of '0'.

<h3><a name="q5">10.3.2 Inline, replaced elements</a></h3>

<p>A specified value of 'auto' for <a href="visuren.html#propdef-left" class="noxref"><span
class="propinst-left">'left'</span></a>, <a href="visuren.html#propdef-right" class="noxref"><span
class="propinst-right">'right'</span></a>, <a href="box.html#propdef-margin-left" class="noxref"><span
class="propinst-margin-left">'margin-left'</span></a> or <a href="box.html#propdef-margin-right" class="noxref"><span
class="propinst-margin-right">'margin-right'</span></a> becomes a computed
value of '0'. A specified value of 'auto' for <a href="visudet.html#propdef-width" class="noxref"><span
class="propinst-width">'width'</span></a> gives the element's <a
href="conform.html#intrinsic">intrinsic</a> width as the computed value.

<h3><a name="q6">10.3.3 Block-level, non-replaced elements in normal flow</a></h3>

<p>If <a href="visuren.html#propdef-left" class="noxref"><span class="propinst-left">'left'</span></a> or <a href="visuren.html#propdef-right" class="noxref"><span
class="propinst-right">'right'</span></a> are given as 'auto', their
computed value is 0. The following <a
name="width-constraints">constraints</a> must hold between the other
properties:</p>
<blockquote>
<p><a href="box.html#propdef-margin-left" class="noxref"><span class="propinst-margin-left">'margin-left'</span></a> + <a href="box.html#propdef-border-left-width" class="noxref"><span
class="propinst-border-left-width">'border-left-width'</span></a> + <a href="box.html#propdef-padding-left" class="noxref"><span
class="propinst-padding-left">'padding-left'</span></a> + <a href="visudet.html#propdef-width" class="noxref"><span
class="propinst-width">'width'</span></a> + <a href="box.html#propdef-padding-right" class="noxref"><span
class="propinst-padding-right">'padding-right'</span></a> + <a href="box.html#propdef-border-right-width" class="noxref"><span
class="propinst-border-right-width">'border-right-width'</span></a> +
<a href="box.html#propdef-margin-right" class="noxref"><span class="propinst-margin-right">'margin-right'</span></a> = width of <a
href="#containing-block-details">containing block</a>
</blockquote>
<p>(If the border style is 'none', use '0' as the border width.) If
all of the above have a specified value other than 'auto', the values
are said to be "over-constrained" and one of the computed values will
have to be different from its specified value. If the <a href="visuren.html#propdef-direction" class="noxref"><span
class="propinst-direction">'direction'</span></a> 
property has the value 'ltr', the specified value of <a href="box.html#propdef-margin-right" class="noxref"><span
class="propinst-margin-right">'margin-right'</span></a> is ignored and the
value is computed so as to make the equality true. If the value of
<a href="visuren.html#propdef-direction" class="noxref"><span class="propinst-direction">'direction'</span></a> is 'ltr', this
happens to <a href="box.html#propdef-margin-left" class="noxref"><span class="propinst-margin-left">'margin-left'</span></a> instead.

<p>If there is exactly one value specified as 'auto', its computed
value follows from the equality.

<p>If <a href="visudet.html#propdef-width" class="noxref"><span class="propinst-width">'width'</span></a> is set to 'auto',
any other 'auto' values become '0' and <a href="visudet.html#propdef-width" class="noxref"><span
class="propinst-width">'width'</span></a> follows from the resulting
equality.

<p>If both <a href="box.html#propdef-margin-left" class="noxref"><span class="propinst-margin-left">'margin-left'</span></a> and
<a href="box.html#propdef-margin-right" class="noxref"><span class="propinst-margin-right">'margin-right'</span></a> are 'auto',
their computed values are equal.

<h3><a name="q7">10.3.4 Block-level, replaced elements in normal flow</a></h3>

<p>If <a href="visuren.html#propdef-left" class="noxref"><span class="propinst-left">'left'</span></a> or <a href="visuren.html#propdef-right" class="noxref"><span
class="propinst-right">'right'</span></a> are 'auto', their computed value
is 0. If <a href="visudet.html#propdef-width" class="noxref"><span class="propinst-width">'width'</span></a> is specified as
'auto', its value is the element's <a
href="conform.html#intrinsic">intrinsic</a> width. If one of the margins is
'auto', its computed value is given by the <a
href="#width-constraints">constraints</a> above. Furthermore, if both
margins are 'auto', their computed values are equal.

<h3><a name="q8">10.3.5 Floating, non-replaced elements</a></h3>

<p>If <a href="visuren.html#propdef-left" class="noxref"><span class="propinst-left">'left'</span></a>, <a href="visuren.html#propdef-right" class="noxref"><span
class="propinst-right">'right'</span></a>, <a href="visudet.html#propdef-width" class="noxref"><span
class="propinst-width">'width'</span></a>, <a href="box.html#propdef-margin-left" class="noxref"><span
class="propinst-margin-left">'margin-left'</span></a>, or <a href="box.html#propdef-margin-right" class="noxref"><span
class="propinst-margin-right">'margin-right'</span></a> are specified as
'auto', their computed value is '0'.

<h3><a name="q9">10.3.6 Floating, replaced elements</a></h3>

<p>If <a href="visuren.html#propdef-left" class="noxref"><span class="propinst-left">'left'</span></a>, <a href="visuren.html#propdef-right" class="noxref"><span
class="propinst-right">'right'</span></a>, <a href="box.html#propdef-margin-left" class="noxref"><span
class="propinst-margin-left">'margin-left'</span></a> or <a href="box.html#propdef-margin-right" class="noxref"><span
class="propinst-margin-right">'margin-right'</span></a> are specified as
'auto', their computed value is '0'. If 'width' is 'auto', its value
is the element's <a href="conform.html#intrinsic">intrinsic</a> width.

<h3>10.3.7 <a name="abs-non-replaced-width">Absolutely positioned, non-replaced elements</a></h3>

<p>The constraint that determines the computed values for these
elements is:
<blockquote>
<p><a href="visuren.html#propdef-left" class="noxref"><span class="propinst-left">'left'</span></a> + <a href="box.html#propdef-margin-left" class="noxref"><span
class="propinst-margin-left">'margin-left'</span></a> + <a href="box.html#propdef-border-left-width" class="noxref"><span
class="propinst-border-left-width">'border-left-width'</span></a> + <a href="box.html#propdef-padding-left" class="noxref"><span
class="propinst-padding-left">'padding-left'</span></a> + <a href="visudet.html#propdef-width" class="noxref"><span
class="propinst-width">'width'</span></a> + <a href="box.html#propdef-padding-right" class="noxref"><span
class="propinst-padding-right">'padding-right'</span></a> + <a href="box.html#propdef-border-right-width" class="noxref"><span
class="propinst-border-right-width">'border-right-width'</span></a> +
<a href="box.html#propdef-margin-right" class="noxref"><span class="propinst-margin-right">'margin-right'</span></a> + <a href="visuren.html#propdef-right" class="noxref"><span
class="propinst-right">'right'</span></a> = width of <a
href="#containing-block-details">containing block</a>
</blockquote>
<p>(If the border style is 'none', use '0' as the border width.)  The
solution to this constraint is reached through a number of
substitutions in the following order:</p>

<ol>
<li>If <a href="visuren.html#propdef-left" class="noxref"><span class="propinst-left">'left'</span></a> 
has the value 'auto' while <a href="visuren.html#propdef-direction" class="noxref"><span
class="propinst-direction">'direction'</span></a> is 'ltr', replace
'auto' with the
distance from the left edge of the containing block to the left margin
edge of a hypothetical box that would have been the first box of the
element if its <a href="visuren.html#propdef-position" class="noxref"><span class="propinst-position">'position'</span></a>
property had been 'static'. (But rather than actually computing that
box, user agents are free to make a guess at its probable position.) The value
is negative if the hypothetical box is to the left of the
containing block.

<li>If <a href="visuren.html#propdef-right" class="noxref"><span class="propinst-right">'right'</span></a> has the
value 'auto' while
<a href="visuren.html#propdef-direction" class="noxref"><span class="propinst-direction">'direction'</span></a> is 'rtl',
replace 'auto' with 
the distance from the right edge of the containing block to
the right margin edge of the same hypothetical box as above. The value
is positive if the hypothetical box is to the left of the containing
block's edge.

<li>If <a href="visudet.html#propdef-width" class="noxref"><span class="propinst-width">'width'</span></a> is 'auto', 
replace any remaining 'auto' for <a href="visuren.html#propdef-left" class="noxref"><span class="propinst-left">'left'</span></a>
or <a href="visuren.html#propdef-right" class="noxref"><span class="propinst-right">'right'</span></a> with '0'.

<li>If <a href="visuren.html#propdef-left" class="noxref"><span class="propinst-left">'left'</span></a>, <a href="visuren.html#propdef-right" class="noxref"><span
class="propinst-right">'right'</span></a> or <a href="visudet.html#propdef-width" class="noxref"><span
class="propinst-width">'width'</span></a> are (still) 'auto', replace any
'auto' on <a href="box.html#propdef-margin-left" class="noxref"><span class="propinst-margin-left">'margin-left'</span></a> or
<a href="box.html#propdef-margin-right" class="noxref"><span class="propinst-margin-right">'margin-right'</span></a> with '0'.

<li>If at this point both <a href="box.html#propdef-margin-left" class="noxref"><span
class="propinst-margin-left">'margin-left'</span></a> and <a href="box.html#propdef-margin-right" class="noxref"><span
class="propinst-margin-right">'margin-right'</span></a> are still 'auto',
solve the equation under the extra constraint that the two margins
must get equal values.

<li>If at this point there is only one 'auto' left, solve the equation 
for that value.

<li>If at this point the values are over-constrained, ignore the value
for either <a href="visuren.html#propdef-left" class="noxref"><span class="propinst-left">'left'</span></a> (in case <a href="visuren.html#propdef-direction" class="noxref"><span
class="propinst-direction">'direction'</span></a> is 'rtl') or <a href="visuren.html#propdef-right" class="noxref"><span
class="propinst-right">'right'</span></a> (in case <a href="visuren.html#propdef-direction" class="noxref"><span
class="propinst-direction">'direction'</span></a> is 'ltr') 
and solve for that value.
</ol>

<h3><a name="q11">10.3.8 Absolutely positioned, replaced elements</a></h3>

<P>This situation is similar to the previous one, except that the
element has an <a href="conform.html#intrinsic">intrinsic</a> width. The
sequence of substitutions is now:</p>

<ol>
<li>If <a href="visudet.html#propdef-width" class="noxref"><span class="propinst-width">'width'</span></a> is 'auto',
substitute the element's <a
href="conform.html#intrinsic">intrinsic</a> width.

<li>If <a href="visuren.html#propdef-left" class="noxref"><span class="propinst-left">'left'</span></a> 
has the value 'auto' while <a href="visuren.html#propdef-direction" class="noxref"><span
class="propinst-direction">'direction'</span></a> is 'ltr', replace