W3C home > Mailing lists > Public > public-css-commits@w3.org > October 2011

csswg/css3-gcpm Overview.html,1.152,1.153

From: (wrong string) åkon Wium Lie via cvs-syncmail <cvsmail@w3.org>
Date: Mon, 31 Oct 2011 06:28:45 +0000
To: public-css-commits@w3.org
Message-Id: <E1RKlMT-0007rg-Um@lionel-hutz.w3.org>
Update of /sources/public/csswg/css3-gcpm
In directory hutz:/tmp/cvs-serv30217

Modified Files:
	Overview.html 
Log Message:
x

Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-gcpm/Overview.html,v
retrieving revision 1.152
retrieving revision 1.153
diff -u -d -r1.152 -r1.153
--- Overview.html	31 Oct 2011 05:55:10 -0000	1.152
+++ Overview.html	31 Oct 2011 06:28:43 -0000	1.153
@@ -3242,7 +3242,7 @@
      <tr>
       <td><em>Percentages:</em>
 
-      <td>refer to width and height of containing block
+      <td>see prose
 
      <tr>
       <td><em>Media:</em>
@@ -3255,62 +3255,43 @@
       <td>one or two absolute lengths
    </table>
 
-   <p>This property pushes floated elements in the opposite direction of the
-    where they have been floated with &lsquo;<code
-    class=property>float</code>&rsquo;. If one value is specified, it is the
-    horizontal offset. If two values are specified, the first is the
-    horizontal and the second is the vertical offset. If an element has only
-    been floated horizontally (e.g., by setting &lsquo;<code class=css>float:
-    right</code>&rsquo;), this property will only offset the float
-    horizontally, even if a vertical value also has been specified. Likewise,
-    if an element has only been floated vertically, this property will only
-    offset the float vertically. If an element has been floated both
-    horizontally and vertically, this property will offset both horizontally
-    and vertically. If no vertical value has been specified, the vertical
-    offset is set to zero.
+   <p>This property pushes a float in opposite direction of the where it has
+    been floated with &lsquo;<code class=property>float</code>&rsquo;. If one
+    value is specified, it is the horizontal offset. If two values are
+    specified, the first is the horizontal and the second is the vertical
+    offset. If no vertical value has been specified, the vertical offset is
+    set to zero.
+
+   <p>Negative values are allowed; a negative values will push the float in
+    the same direction as it has been floated with &lsquo;<code
+    class=property>float</code>&rsquo;
+
+   <p>The float will never be pushed outside the content edges of the
+    multicol element due to a setting on &lsquo;<a href="#float-offset"><code
+    class=property>float-offset</code></a>&rsquo;.
+
+   <p>Percentage values refer to the width/height of the float plus a
+    fraction of the column gap.
 
    <div class=example>
     <pre>img { 
-  float: top left;
-  float-offset: 50% 50%;
-  width: 100%;
+  column-gap: 1em;
+  float: top right;
+  float-offset: -50% 3em;
+  width: 120%;
 }
 </pre>
-    The first rule in the code above floats images to the top left of its
-    natural column. The second rule pushes the float in the opposite
-    directions: to the right and downwards. The horizontal component
-    (&lsquo;<code class=css>50$</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: <img src=11.png>
-    <p>Assuming a three-column layout, the same rendering can be achieved by
-     floating the element to the right instead:
-
-    <pre>
-div.quote { 
-  float: top right multicol; 
-  float-offset: 2gr; 
-  width: 1gr }
-</pre>
-   </div>
-
-   <p>The floated element will never be pushed outside the content edges of
-    the multicol element due to &lsquo;<a href="#float-offset"><code
-    class=property>float-offset</code></a>&rsquo;.
+    <img src=11.png></div>
 
    <div class=example>
     <pre>
 img {
-  float: top right multicol;
-  width: 3gr;
+  float: top right;
+  width: 100%;
+  float-offset: -80% 2em;
 }
 </pre>
-
-    <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. <img
-     src=12.png>
-   </div>
+    <img src=12.png></div>
    <!--
 <h2>Aligning baselines in multi-column layouts</h2>
 
@@ -3682,7 +3663,7 @@
 
       <td>no
 
-      <td>refer to width and height of containing block
+      <td>see prose
 
       <td>visual, paged
 
Received on Monday, 31 October 2011 06:28:50 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 31 October 2011 06:28:53 GMT