fixing typos, adding examples

Author: howcom

css3-multicol/Overview.src.html

@@ -246,9 +246,11 @@ <h2>The multi-column model</h2>
 in the block direction. All column boxes in a multi-column element
 have the same column width, and all column boxes in a row have the
 same column height. Within each row in the multi-column element,
-adjacent column boxes are separated by a <em>column gap</em>, which may
-contain a <em>column rule</em>. All column gaps and column rules in the
-same row are equal.
+adjacent column boxes are separated by a <em>column gap</em>, which
+may contain a <em>column rule</em>. All column gaps in the same row
+are equal. All column rules in the same row are also equal, if the
+appear; column rows only appear between columns that both have
+content.
 
 <p>In the simplest case a multicol element will contain only one row
 of columns, and the height of each column will be equivalent to the
@@ -519,7 +521,7 @@ <h2>The multi-column model</h2>
 as per CSS 2.1 section 9.4.1.
 
 <div class="example">
-<p>A top margin set on the first child element of a mulitcol element will not collase with the margins of the multicol element. 
+<p>A top margin set on the first child element of a multicol element will not collapse with the margins of the multicol element. 
 </div>
 
 <p>Nested multi-column elements are allowed, but there may be
@@ -828,20 +830,20 @@ <h3>Stacking context</h3>
 
 <h2>Column gaps and rules</h2>
 
-<p>Column gaps and rules are placed between columns of the same
-multi-column element. The length of the column gaps and column rules
+<p>Column gaps and rules are placed between columns in the same
+multicol element. The length of the column gaps and column rules
 is equal to the length of the columns. Column gaps take up space. That
 is, column gaps will push apart content in adjacent columns (within
-the same multi-column element). 
+the same multicol element). 
 
 <p>A column rule is placed in the middle of the column gap. Column
 rules do not take up space. That is, the presence or thickness of a
 column rule will not alter the placement of anything else. If a column
 rule is wider than its gap, the column rule will overlap adjacent
 column boxes. Column rules are painted just above the background of
 the multicol element. This allows child elements with 'z-index' values
-to be on top of column rules. Column rules are only drawn between
-columns that have content.
+to be on top of column rules. Column rules are only drawn between two
+columns that both have content. 
 
 
 <h3>'column-gap'</h3>
@@ -1018,6 +1020,29 @@ <h3>'column-rule'</h3>
 the same place in the style sheet. Omitted values are set to their
 initial values.
 
+<div class=example>
+
+<p>In this example, the column rule and the column gap have the same
+width. Therefore, they will occupy exactly the same space.
+
+<pre>
+body { 
+  column-gap: 1em;
+  column-rule-width: 1em;
+  column-rule-style: solid;
+  column-rule-color: black;
+}
+</pre>
+</div>
+
+
+<div class=example>
+If a tall image is moved to a column on the next page to find room for
+it, its natural column may be left empty. If so, the column is
+considered empty for the purpose of deciding if the column rule should
+be drawn or not.
+</div>
+
 
 
 <h2>Column breaks</h2>
@@ -1148,7 +1173,7 @@ <h2>Column breaks</h2>
 <p>When a page or column break splits a box, the box's margins,
 borders, and padding have no visual effect where the split occurs.
 However, the margin immediately after a forced page/column break will
-be preserved. A forced page/colum break is a break that does not occur
+be preserved. A forced page/column break is a break that does not occur
 naturally.
 
 <p class=note>In the future, new properties may describe alternate
@@ -1160,7 +1185,7 @@ <h2>Column breaks</h2>
 elements and after <code>img</code> elements:
 
 <pre>
-.multicol { colum-width: 8em }
+.multicol { column-width: 8em }
 .multicol h2 { break-before: column; margin-top: 2em }
 .multicol img { break-after: column }
 </pre>