- 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