visuren.html

CSS lets learn this step by step...

then offset from that position according to these properties).

<H2>9.4 <a name="normal-flow">Normal flow</a></H2> 

<P>Boxes in the normal flow belong to a <a name="x41"><span class="index-def"
title="formatting context">formatting context</span></a>, which may be
block or inline, but not both simultaneously.  <a
href="#block-box">Block</a> boxes participate in a <a
href="#block-formatting">block formatting</a> context.  <a
href="#inline-box">Inline boxes</a> participate in an <a
href="#inline-formatting">inline formatting</a> context.

<h3>9.4.1 <a name="block-formatting">Block formatting context</a></h3> 

<P>In a block formatting context, boxes are laid out one after the
other, vertically, beginning at the top of a containing block. The
vertical distance between two sibling boxes is determined by the <a href="box.html#propdef-margin" class="noxref"><span
class="propinst-margin">'margin'</span></a> properties. Vertical margins
between adjacent block boxes in a block formatting context <a
href="box.html#collapsing-margins">collapse</a>.

<P>In a block formatting context, each box's left outer edge touches
the left edge of the containing block (for right-to-left formatting,
right edges touch). This is true even in the presence of floats
(although a box's <em>content</em> area may shrink due to the floats).

<P>For information about page breaks in paged media, please consult
the section on <a href="page.html#allowed-page-breaks">allowed
page breaks</a>.

<H3>9.4.2 <a name="inline-formatting">Inline formatting context</a></H3>

<P>In an inline formatting context, boxes are laid out horizontally,
one after the other, beginning at the top of a containing
block. Horizontal margins, borders, and padding are respected between
these boxes. The boxes may be aligned vertically in different ways: their
bottoms or tops may be aligned, or the baselines of text within them
may be aligned. The rectangular area that contains the boxes that form
a line is called a <span class="index-def" title="line box"><a
name="line-box"><dfn>line box</dfn></a></span>. 

<P>The width of a line box is determined by a <A
HREF="#containing-block">containing block</A>.  The height of a line
box is determined by the rules given in the section on <a
href="visudet.html#line-height">line height calculations</a>. A line
box is always tall enough for all of the boxes it contains. However,
it may be taller than the tallest box it contains (if, for example,
boxes are aligned so that baselines line up).  When the height of a
box B is less than the height of the line box containing it, the
vertical alignment of B within the line box is determined by the <a href="visudet.html#propdef-vertical-align" class="noxref"><span
class="propinst-vertical-align">'vertical-align'</span></a> property.

<P>When several inline boxes cannot fit horizontally within a single
line box, they are distributed among two or more vertically-stacked
line boxes. Thus, a paragraph is a vertical stack of line boxes. Line
boxes are stacked with no vertical separation and they never overlap.

<P>In general, the left edge of a line box touches the left edge
of its containing block and the right edge touches the right edge of
its containing block. However, floating boxes may come between the
containing block edge and the line box edge.  Thus, although line
boxes in the same inline formatting context generally have the same
width (that of the containing block), they may vary in width if
available horizontal space is reduced due to <a
href="#floats">floats</a>. Line boxes in the same inline formatting
context generally vary in height (e.g., one line might contain a tall
image while the others contain only text).

<P>When the total width of the inline boxes on a line is less than the
width of the line box containing them, their horizontal distribution
within the line box is determined by the <a href="text.html#propdef-text-align" class="noxref"><span
class="propinst-text-align">'text-align'</span></a> property.  If that
property has the value 'justify', the user agent may stretch the
inline boxes as well.

<P>Since an inline box may not exceed the width of a line box, long
inline boxes are split into several boxes and these boxes distributed
across several line boxes. When an inline box is split, margins,
borders, and padding have no visual effect where the split occurs.
Formatting of margins, borders, and padding may not be fully defined if
the split occurs within a bidirectional embedding.

<P>Inline boxes may also be split into several boxes <em>within the
same line box</em> due to <a href="#direction">bidirectional text
processing</a>.

<div class="html-example"><P> 
Here is an example of inline box construction. The following paragraph
(created by the HTML block-level element P) contains anonymous text
interspersed with the elements EM and STRONG:

<PRE>
&lt;P&gt;Several &lt;EM&gt;emphasized words&lt;/EM&gt; appear
&lt;STRONG&gt;in this&lt;/STRONG&gt; sentence, dear.&lt;/P&gt;
</PRE>

<P>The P element generates a block box that contains five inline
boxes, three of which are anonymous:</p>

<ul>
<li>Anonymous: "Several"
<li>EM: "emphasized words"
<li>Anonymous: "appear"
<li>STRONG: "in this"
<li>Anonymous: "sentence, dear."
</ul>
 
<P>To format the paragraph, the user agent flows the five boxes into
line boxes. In this example, the box generated for the P element
establishes the containing block for the line boxes. If the containing
block is sufficiently wide, all the inline boxes will fit into a
single line box:

<PRE>
 Several <EM>emphasized words</EM> appear <STRONG>in this</STRONG> sentence, dear.
</PRE>

<P>If not, the inline boxes will be split up and distributed across
several line boxes. The previous paragraph might be split as follows:

<PRE>
Several <EM>emphasized words</EM> appear
<STRONG>in this</STRONG> sentence, dear.
</PRE>

or like this:

<PRE>
Several <EM>emphasized</EM>  
<EM>words</EM> appear <STRONG>in this</STRONG> 
sentence, dear.
</PRE>

</div>

<P>In the previous example, the EM box was split into two EM boxes
(call them "split1" and "split2"). Margins, borders,
padding, or text decorations have no visible effect after split1 or
before split2.

<div class="html-example"><P>
Consider the following example:

<PRE>
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"&gt;
&lt;HTML&gt;
  &lt;HEAD&gt;
    &lt;TITLE&gt;Example of inline flow on several lines&lt;/TITLE&gt;
    &lt;STYLE type="text/css"&gt;
      EM {
        padding: 2px; 
        margin: 1em;
        border-width: medium;
        border-style: dashed;
        line-height: 2.4em;
      }
    &lt;/STYLE&gt;
  &lt;/HEAD&gt;
  &lt;BODY&gt;
    &lt;P&gt;Several &lt;EM&gt;emphasized words&lt;/EM&gt; appear here.&lt;/P&gt;
  &lt;/BODY&gt;
&lt;/HTML&gt;
</PRE>

<P>Depending on the width of the P, the boxes may be distributed as
follows:</P>

<div class="figure">
<P><img src="./images/inline-layout.gif"
     alt="Image illustrating the effect of line breaking on the
display of margins, borders, and padding."><SPAN class="dlink">&nbsp;&nbsp;&nbsp;<A name="img-inline-layout" href="images/longdesc/inline-layout-desc.html" title="Long description for illustration of margin/border
behavior on split inline box">[D]</A></SPAN></p>
</div>

<ul>
<li> The margin is inserted before "emphasized" and after "words". 

<li> The padding is inserted before, above, and below
"emphasized" and after, above, and below "words". A
dashed border is rendered on three sides in each case.
</ul>
</div>

<H3>9.4.3 <a name="relative-positioning">Relative positioning</a></H3>  

<P>Once a box has been laid out according to the <a
href="#normal-flow">normal flow</a>, it may be shifted relative to
this position. This is called <a name="x43"><span class="index-def" title="relative
positioning"><dfn>relative positioning</dfn></span></a>. Offsetting a box
(B1) in this way has no effect on the box (B2) that follows: B2 is
given a position as if B1 were not offset and B2 is not re-positioned
after B1's offset is applied. This implies that relative positioning
may cause boxes to overlap.

<p>Relatively positioned boxes keep their normal flow size, including
line breaks and the space originally reserved for them. A relatively
positioned box establishes a new a new <a
href="#containing-block">containing block</a> for normal
flow children and positioned descendants.

<P>A relatively positioned box is generated when the <a href="visuren.html#propdef-position" class="noxref"><span
class="propinst-position">'position'</span></a> property for an element
has the value 'relative'.  The offset is specified by the <a href="visuren.html#propdef-top" class="noxref"><span
class="propinst-top">'top'</span></a>, <a href="visuren.html#propdef-bottom" class="noxref"><span
class="propinst-bottom">'bottom'</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.

<P>Dynamic movement of relatively positioned boxes can produce
animation effects in scripting environments (see also the <a href="visufx.html#propdef-visibility" class="noxref"><span
class="propinst-visibility">'visibility'</span></a> property). Relative
positioning may also be used as a general form of superscripting and
subscripting except that line height is not automatically adjusted to
take the positioning into consideration. See the description of <a
href="visudet.html#line-height">line height calculations</a> for more
information.

<P>Examples of relative positioning are provided in the section <a
href="#comparison">comparing normal flow, floats, and absolute
positioning</a>.

<H2>9.5 <a name="floats">Floats</a></H2>

<P>A float is a box that is shifted to the left or right on the
current line. The most interesting characteristic of a float (or
"floated" or "floating" box) is that content may flow along its side
(or be prohibited from doing so by the <a href="visuren.html#propdef-clear" class="noxref"><span
class="propinst-clear">'clear'</span></a> property). Content flows down
the right side of a left-floated box and down the left side of a
right-floated box. The following is an introduction to float
positioning and content flow; the exact <a
href="#float-rules">rules</a> governing float behavior are given in
the description of the <a href="visuren.html#propdef-float" class="noxref"><span class="propinst-float">'float'</span></a>
property.

<P>A floated box must have an explicit width (assigned via the <a href="visudet.html#propdef-width" class="noxref"><span
class="propinst-width">'width'</span></a> property, or its <a
href="conform.html#intrinsic">intrinsic</a> width in the case of <a
href="conform.html#replaced-element">replaced elements</a>). Any
floated box becomes a <a href="#block-box">block box</a> that is
shifted to the left or right until its outer edge touches the
containing block edge or the outer edge of another float. The top of
the floated box is aligned with the top of the current line box (or
bottom of the preceding block box if no line box exists). If there
isn't enough horizontal room on the current line for the float, it is
shifted downward, line by line, until a line has room for it.

<P>Since a float is not in the flow, non-positioned block boxes
created before and after the float box flow vertically as if the float
didn't exist. However, line boxes created next to the float are
shortened to make room for the floated box.  Any content in the
current line before a floated box is reflowed in the first available
line on the other side of the float.

<P>Several floats may be adjacent, and this model also applies to
adjacent floats in the same line.

<div class="example"><P style="display:none">Example(s):</P><P>
The following rule floats all IMG boxes with
<samp>class="icon"</samp> to the left (and
sets the left margin to '0'):</p>

<PRE>
IMG.icon { 
  float: left;
  margin-left: 0;
}
</PRE>
</div>


<div class="html-example"><P>
Consider the following HTML source and style sheet:</p>

<PRE>  
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"&gt;
&lt;HTML&gt;
  &lt;HEAD&gt;
    &lt;TITLE&gt;Float example&lt;/TITLE&gt;
    &lt;STYLE type="text/css"&gt;
      IMG { float: left }