x

Author: howcom

css3-multicol/Overview.html

@@ -1614,9 +1614,13 @@ <h3 id=column-span><span class=secno>6.1. </span>&lsquo;<a
      <td>none
 
     <tr>
-     <td><em>Applies to:</em>
+     <td><em>Applies to:</em> <!--
+      <td>static, non-floating elements, 
+-->
+      
 
-     <td>static, non-floating elements,
+     <td>block-level elements, except floating and absolutely positioned
+      elements
 
     <tr>
      <td><em>Inherited:</em>
@@ -1727,7 +1731,61 @@ <h3 id=column-span><span class=secno>6.1. </span>&lsquo;<a
   <p>A spanning element takes up more space than the element would take up
    otherwise. When space is limited, it may be impossible to find room for
    the spanning element. In these cases, user agents may treat the element as
-   if &lsquo;<code class=property>none</code>&rsquo; had been specified.
+   if &lsquo;<code class=property>none</code>&rsquo; had been specified on
+   this property.
+
+  <div class=example>
+   <p>In this example, an element with &lsquo;<code class=css>column-span:
+    all</code>&rsquo; is set on an element that naturally ends up...:
+
+   <pre class=css>
+h2 { 
+  column-span: all;
+}
+</pre>
+
+   <p>As a result, the number of columns is increased.
+
+   <div class=cols style="height: 100px">
+    <div class=col style="">
+     <p> Ab cde fgh i jkl. Mno<br>
+      pqr stu vw xyz. A bc<br>
+      def g hij klm nopqrs<br>
+      tuv wxy z. Abc de fg<br>
+      hi jklmno. Pqrstu vw<br>
+    </div>
+
+    <div class=col style="left: 175px">
+     <p> x yz. Abc def ghi jkl.<br>
+      M nop qrst uv wx yz.<br>
+      Ab cde fgh i jkl. Mno<br>
+      pqr stu vw xyz. A bc<br>
+      def g hij klm nopqrs
+    </div>
+
+    <div class=col style="left: 350px">
+     <p> tuv wxy z. Abc de fg<br>
+      hi jklmno. Pqrstu vw<br>
+      x yz. Abc def ghi jkl.<br>
+      M nop qrst uv wx yz.<br>
+      Ab cde fgh i jkl. Mno<br>
+    </div>
+
+    <div class=col style="left: 525px">
+     <p> pqr stu vw xyz. A bc<br>
+      def g hij klm nopqrs<br>
+      tuv wxy z. H2 Abc de fg<br>
+      hi jklmno. Pqrstu vw<br>
+      x yz. Abc def ghi jkl.<br>
+    </div>
+
+    <div class=gap style="left: 150px"></div>
+
+    <div class=gap style="left: 325px"></div>
+
+    <div class=gap style="left: 500px"></div>
+   </div>
+  </div>
 
   <h2 id=filling-columns><span class=secno>7. </span>Filling columns</h2>
 
@@ -2416,7 +2474,8 @@ <h2 class=no-num id=property-index>Property index</h2>
 
      <td>none
 
-     <td>static, non-floating elements,
+     <td>block-level elements, except floating and absolutely positioned
+      elements
 
      <td>no