removing (commenting out) ascii art

Author: howcom

css3-gcpm/Overview.src.html

@@ -9,11 +9,16 @@
 
 
 <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 }
 
@@ -2549,7 +2554,7 @@ <h3>Float intrusion in multicol elements</h3>
 middle column is a long word that is clipped in the middle of the
 column gap.
 
-<p><img src=1.png>
+<img src=1.png>
 
 <!--
 <div class=cols>
@@ -2615,7 +2620,7 @@ <h3>Float intrusion in multicol elements</h3>
 
 <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>
+<img src=2.png>
 <!--
 <div class=cols style="height: 186px">
 
@@ -2803,7 +2808,7 @@ <h3>The 'float-offset' property</h3>
 
 <p>This code can be rendered as:
 
-<p><img src=3.png>
+<img src=3.png>
 
 <!--
 <div class=cols>
@@ -2888,7 +2893,7 @@ <h3>The 'float-offset' property</h3>
 
 <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>
+<img src=5.png>
 
 <!--
 <div class=cols>
@@ -2934,7 +2939,7 @@ <h3>The 'float-offset' property</h3>
 <p>The '1gr' value on
 'width' is equal to the width of the containing block. Here is a possible rendering:
 
-<p><img src=6.png>
+<img src=6.png>
 
 <!--
 <div class=cols>
@@ -2979,7 +2984,7 @@ <h3>The 'float-offset' property</h3>
   width: 1gr }
 </pre>
 
-<p><img src=7.png>
+<img src=7.png>
 
 <!--
 <div class=cols>
@@ -3042,7 +3047,7 @@ <h3>The 'float-offset' property</h3>
 rendering.
 
 
-<p><img src=8.png>
+<img src=8.png>
 
 <!--
 <div class=cols>
@@ -3086,7 +3091,7 @@ <h3>The 'float-offset' property</h3>
 <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>
+<img src=9.png>
 
 <!--
 <div class=cols>
@@ -3133,7 +3138,7 @@ <h3>The 'float-offset' property</h3>
 <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>
+<img src=10.png>
 
 <!--
 <div class=cols>
@@ -3184,7 +3189,7 @@ <h3>The 'float-offset' property</h3>
 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> 
+<img src=11.png> 
 
 <!--
 <div class=cols>
@@ -3231,7 +3236,7 @@ <h3>The 'float-offset' property</h3>
 
 <p>The only difference between this and the previous example is the horizontal value on 'float-offset'. The value ''1.25gr'' 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>
+<img src=12.png>
 
 <!--
 <div class=cols>