Mercurial > drafts / file diff

     1.1 --- a/css3-overflow/Overview.src.html	Mon Aug 06 17:08:38 2012 -0700
     1.2 +++ b/css3-overflow/Overview.src.html	Mon Aug 06 17:42:01 2012 -0700
     1.3 @@ -8,6 +8,19 @@
     1.4    <link rel="stylesheet" type="text/css" href="../default.css">
     1.5    <link rel="stylesheet" type="text/css"
     1.6          href="http://www.w3.org/StyleSheets/TR/W3C-[STATUS].css">
     1.7 +	<style>
     1.8 +		.in-cards-demo {
     1.9 +			width: 13em;
    1.10 +			height: 8em;
    1.11 +
    1.12 +			padding: 4px;
    1.13 +			border: medium solid blue;
    1.14 +			margin: 6px;
    1.15 +
    1.16 +			font: medium/1.3 Times New Roman, Times, serif;
    1.17 +			white-space: nowrap;
    1.18 +		}
    1.19 +	</style>
    1.20  </head>
    1.21  
    1.22  <div class="head">
    1.23 @@ -195,6 +208,42 @@
    1.24  		even if they don't have ''overflow: regions''?
    1.25  	</p>
    1.26  
    1.27 +	<div class="example">
    1.28 +		<table style="width: 100%"><tr><td><pre>
    1.29 +&lt;!DOCTYPE HTML&gt;
    1.30 +&lt;title&gt;Breaking content into
    1.31 +  equal-sized cards&lt;/title&gt;
    1.32 +&lt;style&gt;
    1.33 +  .in-cards {
    1.34 +    overflow: regions;
    1.35 +
    1.36 +    width: 13em;
    1.37 +    height: 8em;
    1.38 +
    1.39 +    padding: 4px;
    1.40 +    border: medium solid blue;
    1.41 +    margin: 6px;
    1.42 +
    1.43 +    font: medium/1.3 Times New
    1.44 +      Roman, Times, serif;
    1.45 +  }
    1.46 +&lt;/style&gt;
    1.47 +&lt;div class="in-cards"&gt;
    1.48 +  In this example, the text in the div
    1.49 +  is broken into a series of cards.
    1.50 +  These cards all have the same style.
    1.51 +  The presence of enough content to
    1.52 +  overflow one of the cards causes
    1.53 +  another one to be created.  The second
    1.54 +  card is created just like it's the
    1.55 +  next sibling of the first.
    1.56 +&lt;/div&gt;
    1.57 +		</pre></td><td>
    1.58 +			<div class="in-cards-demo">In this example, the text in the<br>div is broken into a series of<br>cards.  These cards all have the<br>same style. The presence of<br>enough content to overflow<br>one of the cards causes another</div>
    1.59 +			<div class="in-cards-demo">one to be created.  The second<br>card is created just like it's the<br>next sibling of the first.</div>
    1.60 +		</td></tr></table>
    1.61 +	</div>
    1.62 +
    1.63  <h3 id="region-styling">Region styling</h3>
    1.64  
    1.65  <h4 id="region-pseudo-element">The ::nth-region() pseudo-element</h4>