- From: H?kon Wium Lie via cvs-syncmail <cvsmail@w3.org>
- Date: Mon, 31 Oct 2011 06:28:11 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-gcpm
In directory hutz:/tmp/cvs-serv30185
Modified Files:
Overview.src.html
Log Message:
revising float-offset
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-gcpm/Overview.src.html,v
retrieving revision 1.157
retrieving revision 1.158
diff -u -d -r1.157 -r1.158
--- Overview.src.html 31 Oct 2011 05:55:00 -0000 1.157
+++ Overview.src.html 31 Oct 2011 06:28:09 -0000 1.158
@@ -2768,7 +2768,7 @@
<td>no
<tr>
<td><em>Percentages:</em>
- <td>refer to width and height of containing block
+ <td>see prose
<tr>
<td><em>Media:</em>
<td>visual, paged
@@ -2777,62 +2777,44 @@
<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 'float'. 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
-'float: right'), 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 'float'. 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 'float'
+
+<p>The float will never be pushed outside the content edges
+of the multicol element due to a setting on 'float-offset'.
+
+<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 (''50$'') 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 'float-offset'.
<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>
Received on Monday, 31 October 2011 06:31:44 UTC