- 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