- From: H?kon Wium Lie via cvs-syncmail <cvsmail@w3.org>
- Date: Mon, 31 Oct 2011 06:28:45 +0000
- To: public-css-commits@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 ‘<code
- class=property>float</code>’. 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 ‘<code class=css>float:
- right</code>’), 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 ‘<code class=property>float</code>’. 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 ‘<code
+ class=property>float</code>’
+
+ <p>The float will never be pushed outside the content edges of the
+ multicol element due to a setting on ‘<a href="#float-offset"><code
+ class=property>float-offset</code></a>’.
+
+ <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
- (‘<code class=css>50$</code>’) 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 ‘<a href="#float-offset"><code
- class=property>float-offset</code></a>’.
+ <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 UTC