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

csswg/css3-gcpm Overview.src.html,1.134,1.135

From: (wrong string) åkon Wium Lie via cvs-syncmail <cvsmail@w3.org>
Date: Mon, 10 Oct 2011 20:59:44 +0000
To: public-css-commits@w3.org
Message-Id: <E1RDMwq-000351-2D@lionel-hutz.w3.org>
Update of /sources/public/csswg/css3-gcpm
In directory hutz:/tmp/cvs-serv11818

Modified Files:
	Overview.src.html 
Log Message:
removing old float descriptions

Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-gcpm/Overview.src.html,v
retrieving revision 1.134
retrieving revision 1.135
diff -u -d -r1.134 -r1.135
--- Overview.src.html	10 Oct 2011 20:51:27 -0000	1.134
+++ Overview.src.html	10 Oct 2011 20:59:41 -0000	1.135
@@ -2781,10 +2781,13 @@
 
 <dd>In paged media, float box to the next page. The first column of the multicol element on the next page is considered to be the natural column for boxes affected by this value. 
 
+<dt>next-column
+
+<dd>In paged media, float box to the next column.
 
 <dt>unless-room
 
-<dd>Only float the box if keeping it in its natural position would have yielded a column or page break
+<dd>Only float the box if it otherwise would have lead to a column or page break
 
 <p class=issue>Can this value be combined with all other values? E.g., does "left unless-room" make sense?
 
@@ -2843,941 +2846,6 @@
 </div>
 
 
-
-<h2>Page floats (as sketched in the past)</h2>
-
-<p>Images and figures are sometimes displayed at the top or bottom of
-pages. Also, an element may be moved to the next page or not displayed
-at all if there is not enough room on its native page. These types of
-floats are called "page floats" in this specification.
-
-
-<p>To support page floats, the <span class=property>'float'</span>
-property is extended with several new values:
-
-<dl>
-   <dt>inside
-
-   <dd>On a right page, this value is synonymous with 'left'. On a left page, this value is synonymous with 'right'.
-
-   <dt>outside
-
-   <dd>On a left page, this value is synonymous with 'left', On a right page, this value is synonymous with 'right'.
-
-   <dt>page
-   <dd>Indicates that the page area is the float-root for the element.
-
-   <dt>multicol
-   <dd>Indicates that the multicol element is the float-root for the element. 
-
-   <dt>intrude
-   <dd>The element may intrude neighboring columns; if the element is not in a multi-column element, this keyword has no effect.
-
-   <dt>unless-room
-   <dd>If the element can be laid out in its natural position without causing a page break, it should be laid out there disregarding the 'float' property; in other cases the other values on 'float' will determine its floating behavior.
-
-
-   <dt>top
-   <dd>This keyword indicates that the element is floated to the top of the flow root.
-
-   <dt>bottom
-
-   <dd>This keyword indicates that the element is floated to the bottom of the flow root. 
-
-   <dt>next
-
-   <dd>The float is placed on top of the next page from its source location.
-    If combined with 'bottom', the float is placed on
-    the bottom of the next page.
-
-   <dt>page()
-
-   <dd>The element is floated to a named page. The named page is created for the element, unless a suitable named page already has been created by another 'page()' value. The name page should appear as early as possible, but any 'next' keywords should be honored.
-
-
-   <dd>The element is floated to one or more named pages of the type specified. These named pages are created for the purpose of showing the element, and they are presented as early as possible after the page from which they are displaced. If the element is not the first page float to be displaced from this page area to this named page name, its contents should continue on the last of the previously established named pages (unless precluded, for example by page-breaking properties).
-
-   <dt>hide
-   <dd>As if 'display: none' is set.
-
-</dl>
-
-<p>The values on float are categorized as such:
-
-<ul>
-<li>horizontal keywords: left right inside outside
-<li>vertical keywords: top bottom 
-<li>flow root keywords: page multicol
-<li>modifier keyword: next unless-room
-<li>other keywords: none hide footnote page()
-</ul>
-
-<p>The keywords can be combined to form more complex expressions with these restrictions:
-
-<ul>
-<li>only one horizontal keyword can appear in a set
-<li>only one vertical keyword can appear in a set
-<li>at least one horizontal or vertical keyword must appear, except that ''none'', ''hide'', and ''footnote'' must appear alone
-<li>'next' may appear once along with 'page'
-<li>keywords can appear in any order 
-</ul>
-
-
-<div class="example">
-<p>Float element to the top of the page:
-
-<pre>
-.figure { 
-  float: top page;
-}
-</pre>
-</div>
-
-<div class="example">
-<p>Float element to the top of the next page:
-
-<pre>
-.figure { 
-  float: top next page;
-}
-</pre>
-</div>
-
-
-
-<div class="example">
-<p>Place footnotes at the bottom of the inside columns:
-
-<pre>
-@footnote { 
-  float: bottom inside multicol; 
-}
-</pre>
-</div>
-
-
-<div class="example">
-<p>Place figure on top of current column:
-
-<pre>
-.figure { 
-  float: top;
-}
-</pre>
-</div>
-
-
-
-<div class="example">
-<p>Float the figure to the top of the next page, unless it fits in its natural position without causing a page break:
-
-<pre>
-.figure { 
-  float: top next page unless-room;
-}
-</pre>
-</div>
-
-<div class="example">
-<p>Hide the element unless it fits in its natural position without causing a page break:
-
-<pre>
-.figure { 
-  float: hide unless-room;
-}
-</pre>
-</div>
-
-
-<div class="example">
-
-<p>In this example, wide tables are floated to landscape pages:
-
-<pre>
-table.wide { 
-  float: page(landscape);
-}
-</pre>
-
-In the above code, the element is take out of the flow, which is
-allowed to continue on the same page. If the flow should be broken,
-this code can be used:
-
-<pre>
-table.wide { 
-  page: landscape;
-}
-</pre>
-
-</div>
-
-
-
-<div class="example">
-
-<p>Consider this code:
-
-<pre>
-table { 
-  float: page(landscape);
-}
-</pre>
-
-<p>If two tables appear consecutively, they will both, space
-permitting, be placed on the same named page. To ensure that each
-table appears on its own page, this code can be used:
-
-<pre>
-table { 
-  float: page(landscape);
-  page-break-before: always;
-}
-</pre>
-
-</div>
-
-
-<p>For non-replaced elements in horizontal text, values on 'float'
-that have a horizontal component ('right', 'left', 'outside',
-'inside') will result in shrink-wrap width calculations as per CSS 2.1
-section 10.3.5. Values that only have a vertical component ('top',
-'bottom', 'next', not in combination with other values) will result in
-width calculations as per CSS 2.1 section 10.3.3. In vertical text,
-width calculations are vice versa.
-
-
-<h3>Float intrusion in multicol elements</h3>
-
-<p>In multi-column layouts [[CSS3MULTICOL]], floats appear within columns; they never intrude into neighboring columns. 
-
-<div class=example>
-
-<pre class=css>
-img { float: left intrude; width: 120%;  }
-</pre>
-
-<p>In this example, the image is wider than the column and will
-therefore intrude into the neighboring column. At the bottom of the
-middle column is a long word that is clipped in the middle of the
-column gap.
-
-<img src=1.png>
-
-<!--
-<div class=cols>
-
-<p>Ab cde fgh i jkl. Mno<br> 
-pqr stu vw xyz. A bc<br>
-
-<br><br><br><br><br><br>
-
-def g hij klm nopqrs<br> 
-tuv wxy z. Abc de fg<br>
-
-
-
-<div class="col" style="left: 175px">
-<p>hi jklmno. Pqrstu vw<br>
-x yz. Abc def ghi jkl.<br>
-<span style="padding-left: 30px">M nop qrst uvw</span><br>
-<span style="padding-left: 30px">x yz. Ab cde fgh</span><br> 
-<span style="padding-left: 30px">i jkl. Mnopqr stu</span><br>
-<span style="padding-left: 30px">vw xyz. A bcdef</span><br>
-<span style="padding-left: 30px">ghij klm nopqrs</span><br>
-<span style="padding-left: 30px">tuv wxy z. Abc</span><br>
-de fghi jk klmop qrst<br>
-uvwxyzabcdefghijklmn<br>
-
-</div>
-
-<div class="col" style="left: 350px">
-<p>
-Ab cde fgh i jkl. Mno<br> 
-pqr stu vw xyz. A bc<br>
-def g hij klm nopqrs<br>
-tuv wxy z. Abc de fg<br>
-hi jklmno. Pqrstu vw<br>
-x yz. Abc def ghi jkl.<br>
-
-M nop qrst uv wx yz.<br>
-
-Ab cde fgh i jkl. Mno<br> 
-pqr stu vw xyz.
-
-</div>
-
-
-<div class=rep style="width: 200px"></div>
-<div class=gap style="left: 150px"></div>
-<div class=gap style="left: 325px"></div>
-</div>
--->
-
-</div>
-
-
-
-
-
-<div class=example>
-
-<pre class=css>
-img { float: right intrude; width: 120% }
-</pre>
-
-<p>In this example, the image naturally appears in the last column. Due to being floated to the right, the image will intrude into the neighboring column to the left.
-
-<img src=2.png>
-<!--
-<div class=cols style="height: 186px">
-
-<p>
-Ab cde fgh i jkl. Mno<br> 
-pqr stu vw xyz. A bc<br>
-def g hij klm nopqrs<br>
-tuv wxy z. Abc de fg<br>
-hi jklmno. Pqrstu vw<br>
-x yz. Abc def ghi j<br>
-kl. M nop qrst uv wx<br>
-yz. Ab cde fgh i jkl<br> 
-mno pqr stu vw xyz.
-
-
-
-<div class="col" style="left: 175px">
-<p>
-Ab cde fgh i jkl. Mno<br> 
-pqr stu vw xyz. A bc<br>
-def g hij klm nop<br>
-qrs tuv wxy z.<br>
-Rst uvw x yz. Ab<br>
-c def ghi jkl m.<br>
-Nop qrst uv wx<br>
-Ryz. Ab cdef gh<br> 
-i jklmno pqr stu vw
-
-</div>
-
-<div class="col" style="left: 350px">
-<p>
-xyz. Abc def ghi jkl<br>
-mno. Pqr stu vw xyz.<br>
-<br><br><br><br><br><br>
-Ab cde fgh ij klm no.
-</div>
-
-
-<div class=rep style="width: 200px; right: 0"></div>
-<div class=gap style="left: 150px"></div>
-<div class=gap style="left: 325px"></div>
-</div>
--->
-
-
-</div>
-
-
-
-
-<h2>Advanced multi-column layout (part of mk2, now drprecated)</h2>
-
-<p>In paged media, it is common for figures, captions, images, and
-quotes to be laid out in certain positions for typographical reasons,
-rather than for structural (as in content order) reasons. For example,
-an image that illustrates a news story is often placed in the upper
-right corner of the article, irrespective of its order in the content.
-A poignant quote from the article may be shown in large type in the
-column gap, pushing aside text in both columns, to get the attention
-of the reader. 
-
-<p>Basic multi-column layouts is described in a separated CSS3 module
-[[CSS3COL]]. This section extends multi-column functionality so that
-more advanced, but commonly used, layouts can be achieved.
-
-<p>The proposed functionality relies on three new components:
-
-<ul>
-<li>one new value on float: ''multicol'' (listed in the previous section)
-<li>one new property: 'float-offset'
-<!--<li>one new unit: ''gr''-->
-</ul>
-
-<p>The strategy for achieving advanced multi-column layout is similar
-to page floats; elements escape their normal flow root by setting
-a value on 'float'. In the case of multi-column layout, the keyword is
-''multicol'' (instead of ''page'') and it indicates that the
-element should floated with regard to. the multi-column element instead of the
-column where it naturally occurs.
-
-<p>To further enhance positioning, the 'float-offset' property is
-introduced. It pushes elements in the opposite direction of the
-positional keywords, both horizontally and vertically.
-
-<p>The ''gr'' unit is introduced to allow the grid lines of columns
-(and, potentially, tables) to be used in the positioning ans sizing of elements.
-Each column has one grid line on each side corresponding to the
-content edge of the content box. 
-
-<p>The ''gr'' unit has two purposes. When used on the 'float-offset'
-property it identifies a position by counting columns and gaps from
-the position established by the 'float' property. Fractions on the
-'gr' unit refer to fractions of the last counted gap or column.
-
-
-<p>When used on the 'width' property, the 'gr' unit identifies a
-length by counting gaps and columns, starting at the point where the
-element naturally finds itself and continuing in the direction of
-box expansion. Fractions on the 'gr' unit refer to the last gap or
-column counted.
-
-
-<h3>The 'float-offset' property</h3>
-
-<table class=propdef>
-    <tr>
-      <td><em>Name:</em>
-      <td><dfn>float-offset</dfn>
-    <tr>
-      <td><em>Value:</em>
-    <td>&lt;length> &lt;length> ? 
-    <tr>
-      <td><em>Initial:</em>
-      <td>0 0 
-    <tr>
-      <td><em>Applies to:</em>
-      <td>floated elements
-    <tr>
-      <td><em>Inherited:</em>
-      <td>no
-    <tr>
-      <td><em>Percentages:</em>
-      <td>refer to width and height of containing block
-    <tr>
-      <td><em>Media:</em>
-      <td>visual, paged
-    <tr>
-      <td><em>Computed&nbsp;value:</em>
-      <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>If the 'gr' unit or percentage unit is used, it means that the
-middle of the float should be aligned with the specified grid line (or
-portion thereof).
-
-<p>If another unit is used, it means that the float is pushed a
-distance equal to the specified length.
-
-
-<p class="issue">'float-offset' is a good concept for moving a float into
-  the right position. For completeness it should apply to absolute
-  positioning as well. We should reuse existing naming conventions
-  already in place for abspos elements (e.g., 'offset-left, 'right',
-  or call it 'shift left, 'shift right' etc.).
-
-
-<div class="example">
-<p>This code serves as the base document for the examples of this section:
-<pre>
-&lt;html>
-&lt;style>
-div {
-  column-width: 15em;
-  column-gap: 2em;               /* shown in red below */
-  column-rule: thin solid black; /* shown in black below */
-  padding: 1em;                  /* shown in blue below */
-}
-img {
-  display: block;                /* shown in dark gray below */
-}
-&lt;/style>
-&lt;body>
-&lt;div>
-Lorem ipsum dolor sit amet. Nam at jus.
-&lt;img src="foo"/>
-Sed imp er di et ris. Cur abi tur et sapen.
-...
-&lt;/div>
-&lt;/body>
-&lt;/html>
-</pre>
-
-<p>This code can be rendered as:
-
-<img src=3.png>
-
-<!--
-<div class=cols>
-<p>Lorem ipsum dolor<br>sit amet. Nam at jus.
-<br><br><br><br><br><br><br>
-Sed imp er di et ris.<br>Cur abi tur et sapen.
-
-<div style="position: absolute; left: 175px; top: 0; z-index: 6;">
-<p>Lorem ipsum dolor<br>sit amet. Nam at jus.<br>
-Sed imp er di et ris.<br>Cur abi tur et sapen.<br>
-Vivamus a metus.<br> Aenean at risus<br> pharetra ante 
-luctu<br> feugiat quis enim.<br> Cum sociis natoque<br> 
-penatibus et magni.</div>
-
-<div style="position: absolute; left: 350px; top: 0; z-index: 6;">
-<p>Lorem ipsum dolor<br>sit amet. Nam at jus.<br>
-Sed imp er di et ris.<br>Cur abi tur et sapen.<br>
-Vivamus a metus.<br> Aenean at risus<br> pharetra ante 
-luctu<br> feugiat quis enim.<br> Cum sociis natoque<br> 
-penatibus et magni.</div>
-
-<div class=rep></div>
-<div class=gap style="left: 150px"></div>
-<div class=gap style="left: 325px"></div>
-</div>
-
-</div>
-
-
-<div class="example">
-
-<p>If this code is added to the base document:
-
-<pre>
-img { float: right }
-</pre>
-
-<p>it may be rendered as:
-
-<img src=4.png>
-
-<div class=cols>
-
-<p>Lorem ipsum dolor<br>sit amet. Nam at jus.
-<br>Sed<br> imp<br> er di<br> et ris.<br>Cur<br> abi<br> tur et sapen. Fusce<br> sed ligula a turpis.
-
-<div style="position: absolute; left: 175px; top: 0; z-index: 6;">
-<p>Lorem ipsum dolor<br>sit amet. Nam at jus.<br>
-Sed imp er di et ris.<br>Cur abi tur et sapen.<br>
-Vivamus a metus.<br> Aenean at risus<br> pharetra ante 
-luctu<br> feugiat quis enim.<br> Cum sociis natoque<br> 
-penatibus et magni.</div>
-
-<div style="position: absolute; left: 350px; top: 0; z-index: 6;">
-<p>Lorem ipsum dolor<br>sit amet. Nam at jus.<br>
-Sed imp er di et ris.<br>Cur abi tur et sapen.<br>
-Vivamus a metus.<br> Aenean at risus<br> pharetra ante 
-luctu<br> feugiat quis enim.<br> Cum sociis natoque<br> 
-penatibus et magni.</div>
-
-
-<div class=rep style="left: 50px"></div>
-<div class=gap style="left: 150px"></div>
-<div class=gap style="left: 325px"></div>
-</div>
--->
-
-</div>
-
-
-
-<div class="example">
-<p>This code floats images to the bottom of their containing block and
-sets the width to be that of the column:
-
-<pre>
-img { 
-  float: bottom;
-  width: 1gr;
-}
-</pre>
-
-<p>The column box is the containing block for floats, so if an image naturally appears in the first column it will float to its bottom:
-
-<img src=5.png>
-
-<!--
-<div class=cols>
-
-<p>Lorem ipsum dolor<br>sit amet. Nam at jus.<br>
-Sed imp er di et ris.<br>Cur abi tur et sapen.
-
-
-<div style="position: absolute; left: 175px; top: 0; z-index: 6;">
-<p>Lorem ipsum dolor<br>sit amet. Nam at jus.<br>
-Sed imp er di et ris.<br>Cur abi tur et sapen.<br>
-Vivamus a metus.<br> Aenean at risus<br> pharetra ante 
-luctu<br> feugiat quis enim.<br> Cum sociis natoque<br> 
-penatibus et magni.</div>
-
-<div style="position: absolute; left: 350px; top: 0; z-index: 6;">
-<p>Lorem ipsum dolor<br>sit amet. Nam at jus.<br>
-Sed imp er di et ris.<br>Cur abi tur et sapen.<br>
-Vivamus a metus.<br> Aenean at risus<br> pharetra ante 
-luctu<br> feugiat quis enim.<br> Cum sociis natoque<br> 
-penatibus et magni.</div>
-
-
-<div class=rep style="width: 150px; top: 90px"></div>
-<div class=gap style="left: 150px"></div>
-<div class=gap style="left: 325px"></div>
-</div>
--->
-
-</div>
-
-
-
-<div class=example>
-<p>This code floats figures to the top of the multi-column element. 
-
-<pre>
-div.figure { 
-  float: top right multicol; 
-  width: 1gr }
-</pre>
-
-<p>The ''1gr'' value on
-'width' is equal to the width of the containing block. Here is a possible rendering:
-
-<img src=6.png>
-
-<!--
-<div class=cols>
-
-<p>Lorem ipsum dolor<br>sit amet. Nam at jus.<br>
-Sed imp er di et ris.<br>Cur abi tur et sapen.<br>
-Vivamus a metus.<br> Aenean at risus<br> pharetra ante 
-luctu<br> feugiat quis enim.<br> Cum sociis natoque<br> 
-penatibus et magni.
-
-<div style="position: absolute; left: 175px; top: 0px; z-index: 6">
-<p>Lorem ipsum dolor<br>sit amet. Nam at jus.<br>
-Sed imp er di et ris.<br>Cur abi tur et sapen.<br>
-Vivamus a metus.<br> Aenean at risus<br> pharetra ante 
-luctu<br> feugiat quis enim.<br> Cum sociis natoque<br> 
-penatibus et magni.
-</div>
-
-<div style="position: absolute; left: 350px; top: 115px; z-index: 6">
-<p>Lorem ipsum dolor<br>sit amet. Nam at jus.<br>
-Sed imp er di et ris.<br>Cur abi tur et sapen.
-</div>
-
-
-<div class=rep style="top: 0; left: 350px; width: 150px"></div>
-<div class=gap style="left: 150px"></div>
-<div class=gap style="left: 325px"></div>
-</div>
--->
-
-</div>
-
-
-<div class=example>
-<p>In this code, the 'float' property floats the element to the top left of the multi-column element, while the 'float-offset' property pushes it to 
-the right so that it ends up in the column next to it:
-
-<pre>
-div.quote { 
-  float: top left multicol; 
-  float-offset: 2.5gr; 
-  width: 1gr }
-</pre>
-
-<img src=7.png>
-
-<!--
-<div class=cols>
-
-<p>Lorem ipsum dolor<br>sit amet. Nam at jus.<br>
-Sed imp er di et ris.<br>Cur abi tur et sapen.<br>
-Vivamus a metus.<br> Aenean at risus<br> pharetra ante 
-luctu<br> feugiat quis enim.<br> Cum sociis natoque<br> 
-penatibus et magni.
-
-<div style="position: absolute; left: 175px; top: 115px; z-index: 6">
-<p>Lorem ipsum dolor<br>sit amet. Nam at jus.<br>
-Sed imp er di et ris.<br>Cur abi tur et sapen.
-</div>
-
-<div style="position: absolute; left: 350px; top: 0px; z-index: 6">
-<p>Lorem ipsum dolor<br>sit amet. Nam at jus.<br>
-Sed imp er di et ris.<br>Cur abi tur et sapen.<br>
-Vivamus a metus.<br> Aenean at risus<br> pharetra ante 
-luctu<br> feugiat quis enim.<br> Cum sociis natoque<br> 
-penatibus et magni.
-</div>
-
-
-<div class=rep style="top: 0; left: 175px; width: 150px"></div>
-<div class=gap style="left: 150px"></div>
-<div class=gap style="left: 325px"></div>
-</div>
-
--->
-
-<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;
-}
-</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=8.png>
-
-<!--
-<div class=cols>
-
-<p>Lorem ipsum dolor<br>sit amet. Nam at jus.<br>
-Sed imp er di et ris.<br>Cur abi tur et sapen.<br>
-Vivamus a metus.<br> Aenean at risus<br> pharetra ante 
-luctu<br> feugiat quis enim.<br> Cum sociis natoque<br> 
-penatibus et magni.
-
-<div style="position: absolute; left: 175px; top: 115px; z-index: 6">
-<p>Lorem ipsum dolor<br>sit amet. Nam at jus.<br>
-Sed imp er di et ris.<br>Cur abi tur et sapen.
-</div>
-
-<div style="position: absolute; left: 350px; top: 115px; z-index: 6">
-<p>Lorem ipsum dolor<br>sit amet. Nam at jus.<br>
-Sed imp er di et ris.<br>Cur abi tur et sapen.
-</div>
-
-
-<div class=rep style="top: 0; left: 175px; width: 325px"></div>
-<div class=gap style="left: 150px"></div>
-<div class=gap style="left: 325px"></div>
-</div>
--->
-
-</div>
-
-
-
-<div class="example">
-
-<pre>
-img {
-  float: top right multicol;
-  width: 2gr;
-}
-</pre>
-
-<p>The code above floats the element to the top right of the multi-column element. Further, it sets the width of the image to the width of one
-column plus one column gap. Here is a possible rendering. 
-
-<img src=9.png>
-
-<!--
-<div class=cols>
-
-<p>Lorem ipsum dolor<br>sit amet. Nam at jus.<br>
-Sed imp er di et ris.<br>Cur abi tur et sapen.<br>
-Vivamus a metus.<br> Aenean at risus<br> pharetra ante 
-luctu<br> feugiat quis enim.<br> Cum sociis natoque<br> 
-penatibus et magni.
-
-<div style="position: absolute; left: 175px; top: 0px; z-index: 6">
-<p>Lorem ipsum dolor<br>sit amet. Nam at jus.<br>
-Sed imp er di et ris.<br>Cur abi tur et sapen.<br>
-Vivamus a metus.<br> Aenean at risus<br> pharetra ante 
-luctu<br> feugiat quis enim.<br> Cum sociis natoque<br> 
-penatibus et magni.
-</div>
-
-<div style="position: absolute; left: 350px; top: 115px; z-index: 6">
-<p>Lorem ipsum dolor<br>sit amet. Nam at jus.<br>
-Sed imp er di et ris.<br>Cur abi tur et sapen.
-</div>
-
-
-<div class=rep style="top: 0; left: 325px; width: 175px"></div>
-<div class=gap style="left: 150px"></div>
-<div class=gap style="left: 325px"></div>
-</div>
--->
-
-</div>
-
-
-
-<div class="example">
-
-<pre>
-img {
-  float: top right multicol;
-  width: 1.5gr;
-}
-</pre>
-
-<p>The code above floats the element to the top right of the multi-column element. Further, it sets the width of the image to the width of one
-column plus half the column gap.
-
-<img src=10.png>
-
-<!--
-<div class=cols>
-
-<p>Lorem ipsum dolor<br>sit amet. Nam at jus.<br>
-Sed imp er di et ris.<br>Cur abi tur et sapen.<br>
-Vivamus a metus.<br> Aenean at risus<br> pharetra ante 
-luctu<br> feugiat quis enim.<br> Cum sociis natoque<br> 
-penatibus et magni.
-
-<div style="position: absolute; left: 175px; top: 0px; z-index: 6">
-<p>Lorem ipsum dolor<br>sit amet. Nam at jus.<br>
-Sed imp er di et ris.<br>Cur abi tur et sapen.<br>
-Vivamus a metus.<br> Aenean at risus<br> pharetra ante 
-luctu<br> feugiat quis enim.<br> Cum sociis natoque<br> 
-penatibus et magni.
-</div>
-
-<div style="position: absolute; left: 350px; top: 115px; z-index: 6">
-<p>Lorem ipsum dolor<br>sit amet. Nam at jus.<br>
-Sed imp er di et ris.<br>Cur abi tur et sapen.
-</div>
-
-<div class=rep style="top: 0; left: 337.5px; width: 163px"></div>
-<div class=gap style="left: 150px"></div>
-<div class=gap style="left: 325px"></div>
-</div>
--->
-
-</div>
-
-
-<div class="example">
-
-<pre>
-img { 
-  float: top left multicol;
-  float-offset: 1.5gr 50%;
-  width: 8em;
-}
-</pre>
-
-<p>The first rule in the code above floats images to the top left of
-the multi-column element. The second rule pushes the float in the
-opposite directions: to the right and downwards. The horizontal
-component (''1.5gr'') 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> 
-
-<!--
-<div class=cols>
-
-<p>Lorem ipsum dolor<br>sit amet. Nam at jus.
-<br>Sed<br> imp<br> er di<br> et ris.<br>Cur<br> abi<br> tur et sapen. Fusce<br> sed ligula a turpis.
-
-<div style="position: absolute; left: 175px; top: 0; z-index: 6;">
-<p>Lorem ipsum dolor<br>sit amet. Nam at jus.
-<div style="margin-left: 100px">
-Sed<br> imp<br> er di<br> et ris.<br>Cur<br> abi</div>
-tur et sapen. Fusce
-<br>
-sed ligula a turpis.
-</div>
-
-<div style="position: absolute; left: 350px; top: 0; z-index: 6;">
-<p>Lorem ipsum dolor<br>sit amet. Nam at jus.<br>
-Sed imp er di et ris.<br>Cur abi tur et sapen.<br>
-Vivamus a metus.<br> Aenean at risus<br> pharetra ante 
-luctu<br> feugiat quis enim.<br> Cum sociis natoque<br> 
-penatibus et magni.</div>
-
-<div class=rep style="left: 50px; width: 220px"></div>
-<div class=gap style="left: 150px"></div>
-<div class=gap style="left: 325px"></div>
-</div>
--->
-
-</div>
-
-
-<div class="example">
-
-<p>Consider this code:
-
-<pre>
-img { 
-  float: top left multicol;
-  float-offset: 1.25gr 50%;
-  width: 6em;
-}
-</pre>
-
-<p>The only difference between this and the previous example is the horizontal value on 'float-offset'. The value ''1.25gr'' means that a point 25% into the image in the inline direction will be aligned with a point 25% into the column gap. Here is a possible rendering:
- 
-<img src=12.png>
-
-<!--
-<div class=cols>
-
-<p>Lorem ipsum dolor<br>sit amet. Nam at jus.
-<br>Sed imper di et<br>ris. Cur abi tur<br> et sapen. Fusce<br> sed ligula a sic<br> turpis.
-Lorem<br> ipsum dolor sit<br> amet. Namat jus.
-Sed<br> imper di et ris curit.
-
-<div style="position: absolute; left: 175px; top: 0; z-index: 6;">
-<p>Lorem ipsum dolor<br>sit amet. Nam at jus.
-<div style="margin-left: 100px">
-Sed<br> imp<br> er di<br> et ris.<br>Cur<br> abi</div>
-tur et sapen. Fusce
-<br>
-sed ligula a turpis.
-</div>
-
-<div style="position: absolute; left: 350px; top: 0; z-index: 6;">
-<p>Lorem ipsum dolor<br>sit amet. Nam at jus.<br>
-Sed imp er di et ris.<br>Cur abi tur et sapen.<br>
-Vivamus a metus.<br> Aenean at risus<br> pharetra ante 
-luctu<br> feugiat quis enim.<br> Cum sociis natoque<br> 
-penatibus et magni.</div>
-
-<div class=rep style="left: 120px; width: 150px"></div>
-<div class=gap style="left: 150px"></div>
-<div class=gap style="left: 325px"></div>
-</div>
--->
-
-</div>
-
 <h2>Aligning baselines in multi-column layouts</h2>
 
 
Received on Monday, 10 October 2011 20:59:48 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 10 October 2011 20:59:48 GMT