x

Author: howcom

css3-gcpm/Overview.html

@@ -9,11 +9,16 @@
   type="text/css">
 
   <style type="text/css">
+/*
 .cols { width: 500px; height: 200px; background: #fff; position: relative; border: solid 10px blue; margin: 0.5em 2em 1em 0; font: bold 14px/19px Arial, sans-serif }
 .cols p { padding: 3px; margin: 0 }
 .col { position: absolute; left: 0px; top: 0; z-index: 6; width: 170px }
 .gap { position: absolute; background: black; width: 5px; bottom: 0px; top: 0px; border: 10px solid red; border-top-width: 0; border-bottom-width: 0;  }
 .rep { position: absolute; top: 45px; background: #333; height: 110px; width: 100px;  color: white; z-index: 4 }
+*/
+
+div.example img { display: block; margin: 1em 0 }
+
 div.example:before { width: 9em !important }
 div.example { padding-top: 0.5em }
 
@@ -3079,9 +3084,8 @@ <h3 id=float-intrusion-in-multicol-elements><span class=secno>13.1.
 
    <p>In this example, the image is wider than the column and will therefore
     intrude into the neighboring column. At the bottom of the middle column
-    is a long word that is clipped in the middle of the column gap.
-
-   <p><img src=1.png> <!--
+    is a long word that is clipped in the middle of the column gap. <img
+    src=1.png> <!--
 <div class=cols>
 
 <p>Ab cde fgh i jkl. Mno<br> 
@@ -3140,9 +3144,7 @@ <h3 id=float-intrusion-in-multicol-elements><span class=secno>13.1.
 
    <p>In this example, the image naturally appears in the last column. Due to
     being floated to the right, the image will intrude into the neighboring
-    column to the left.
-
-   <p><img src=2.png> <!--
+    column to the left. <img src=2.png> <!--
 <div class=cols style="height: 186px">
 
 <p>
@@ -3355,9 +3357,7 @@ <h3 id=the-float-offset-property><span class=secno>14.1. </span>The
 &lt;/html>
 </pre>
 
-   <p>This code can be rendered as:
-
-   <p><img src=3.png> <!--
+   <p>This code can be rendered as: <img src=3.png> <!--
 <div class=cols>
 <p>Lorem ipsum dolor<br>sit amet. Nam at jus.
 <br><br><br><br><br><br><br>
@@ -3437,9 +3437,8 @@ <h3 id=the-float-offset-property><span class=secno>14.1. </span>The
 </pre>
 
    <p>The column box is the containing block for floats, so if an image
-    naturally appears in the first column it will float to its bottom:
-
-   <p><img src=5.png> <!--
+    naturally appears in the first column it will float to its bottom: <img
+    src=5.png> <!--
 <div class=cols>
 
 <p>Lorem ipsum dolor<br>sit amet. Nam at jus.<br>
@@ -3480,9 +3479,7 @@ <h3 id=the-float-offset-property><span class=secno>14.1. </span>The
 
    <p>The &lsquo;<code class=css>1gr</code>&rsquo; value on &lsquo;<code
     class=property>width</code>&rsquo; is equal to the width of the
-    containing block. Here is a possible rendering:
-
-   <p><img src=6.png> <!--
+    containing block. Here is a possible rendering: <img src=6.png> <!--
 <div class=cols>
 
 <p>Lorem ipsum dolor<br>sit amet. Nam at jus.<br>
@@ -3526,8 +3523,7 @@ <h3 id=the-float-offset-property><span class=secno>14.1. </span>The
   float-offset: 2.5gr; 
   width: 1gr }
 </pre>
-
-   <p><img src=7.png> <!--
+   <img src=7.png> <!--
 <div class=cols>
 
 <p>Lorem ipsum dolor<br>sit amet. Nam at jus.<br>
@@ -3556,8 +3552,7 @@ <h3 id=the-float-offset-property><span class=secno>14.1. </span>The
 </div>
 
 -->
-    
-
+   
    <p>Assuming a three-column layout, the same rendering can be achieved by
     floating the element to the right instead:
 
@@ -3583,9 +3578,8 @@ <h3 id=the-float-offset-property><span class=secno>14.1. </span>The
 
    <p>The code above floats the element to the top right of the multi-column
     element. Further, it sets the width of images to the width of two columns
-    plus the gap between them. Here is a possible rendering.
-
-   <p><img src=8.png> <!--
+    plus the gap between them. Here is a possible rendering. <img src=8.png>
+    <!--
 <div class=cols>
 
 <p>Lorem ipsum dolor<br>sit amet. Nam at jus.<br>
@@ -3623,9 +3617,8 @@ <h3 id=the-float-offset-property><span class=secno>14.1. </span>The
 
    <p>The code above floats the element to the top right of the multi-column
     element. Further, it sets the width of the image to the width of one
-    column plus one column gap. Here is a possible rendering.
-
-   <p><img src=9.png> <!--
+    column plus one column gap. Here is a possible rendering. <img src=9.png>
+    <!--
 <div class=cols>
 
 <p>Lorem ipsum dolor<br>sit amet. Nam at jus.<br>
@@ -3666,9 +3659,7 @@ <h3 id=the-float-offset-property><span class=secno>14.1. </span>The
 
    <p>The code above floats the element to the top right of the multi-column
     element. Further, it sets the width of the image to the width of one
-    column plus half the column gap.
-
-   <p><img src=10.png> <!--
+    column plus half the column gap. <img src=10.png> <!--
 <div class=cols>
 
 <p>Lorem ipsum dolor<br>sit amet. Nam at jus.<br>
@@ -3713,9 +3704,8 @@ <h3 id=the-float-offset-property><span class=secno>14.1. </span>The
     (&lsquo;<code class=css>1.5gr</code>&rsquo;) means that the horizontal
     middle of the element should be in the middle of the gap between the
     left-most column and the one next to it. Vertically, element should be in
-    the middle of the column. Here is a possible rendering:
-
-   <p><img src=11.png> <!--
+    the middle of the column. Here is a possible rendering: <img src=11.png>
+    <!--
 <div class=cols>
 
 <p>Lorem ipsum dolor<br>sit amet. Nam at jus.
@@ -3761,9 +3751,7 @@ <h3 id=the-float-offset-property><span class=secno>14.1. </span>The
     class=property>float-offset</code></a>&rsquo;. The value &lsquo;<code
     class=css>1.25gr</code>&rsquo; means that a point 25% into the image in
     the inline direction will be aligned with a point 25% into the column
-    gap. Here is a possible rendering:
-
-   <p><img src=12.png> <!--
+    gap. Here is a possible rendering: <img src=12.png> <!--
 <div class=cols>
 
 <p>Lorem ipsum dolor<br>sit amet. Nam at jus.