adding images

Author: howcom

css3-gcpm/Overview.src.html

@@ -2549,6 +2549,8 @@ <h3>Float intrusion in multicol elements</h3>
 middle column 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> 
@@ -2611,6 +2613,8 @@ <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.
 
+<img src=2.png>
+
 <div class=cols style="height: 186px">
 
 <p>
@@ -2795,6 +2799,8 @@ <h3>The 'float-offset' property</h3>
 
 <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>
@@ -2832,6 +2838,8 @@ <h3>The 'float-offset' property</h3>
 
 <p>it may be rendered as:
 
+<img src=4.png>
+
 <div class=cols>
 
 <p>Lorem ipsum dolor<br>sit amet. Nam at jus.
@@ -2875,6 +2883,8 @@ <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:
 
+<img src=5.png>
+
 <div class=cols>
 
 <p>Lorem ipsum dolor<br>sit amet. Nam at jus.<br>
@@ -2917,7 +2927,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:
 
-
+<img src=6.png>
 
 <div class=cols>
 
@@ -2961,6 +2971,8 @@ <h3>The 'float-offset' property</h3>
   width: 1gr }
 </pre>
 
+<img src=7.png>
+
 <div class=cols>
 
 <p>Lorem ipsum dolor<br>sit amet. Nam at jus.<br>
@@ -3019,6 +3031,9 @@ <h3>The 'float-offset' property</h3>
 rendering.
 
 
+<img src=8.png>
+
+
 <div class=cols>
 
 <p>Lorem ipsum dolor<br>sit amet. Nam at jus.<br>
@@ -3059,6 +3074,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. 
 
+<img src=9.png>
 
 <div class=cols>
 
@@ -3103,6 +3119,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.
 
+<img src=10.png>
 
 <div class=cols>
 
@@ -3151,7 +3168,9 @@ <h3>The 'float-offset' property</h3>
 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:
- 
+
+<img src=11.png> 
+
 <div class=cols>
 
 <p>Lorem ipsum dolor<br>sit amet. Nam at jus.
@@ -3196,6 +3215,8 @@ <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:
 
+<img src=12.png>
+
 <div class=cols>
 
 <p>Lorem ipsum dolor<br>sit amet. Nam at jus.