Hands On: CSS3 Regions

This demo allows web designers to flow content across containers using CSS3 Regions.
1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada

2

libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin

3

pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue. Suspendisse dui purus, scelerisque at, vulputate vi-

4

tae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy. Fusce aliquet pede non pede. Suspendisse dapibus lorem pellentesque magna. Integer nulla. Donec blandit feugiat ligula. Donec hendrerit, felis et imperdiet euismod, purus ipsum pretium metus, in lacinia nulla nisl eget sapien. Donec ut est in lectus consequat consequat. Etiam eget dui. Aliquam erat volutpat. Sed at lorem in nunc

5

porta tristique.Proin nec augue. Quisque aliquam tempor magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc ac magna. Maecenas odio dolor, vulputate vel, auctor ac, accumsan id, felis. Pellentesque cursus sagittis felis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus

6
7
8
9
10
Page 1 Page 2
Page Design:
Content Container:

<iframe src="text_content.htm"
style="-ms-flow-into: MyFlow"></iframe>

<div>text content</div>

<div style="-ms-grid-column:2; -ms-grid-row:2;">text1</div>

<div style="-ms-grid-column:2; -ms-grid-row:4;">text2</div>

<div style="-ms-grid-column:2; -ms-grid-row:8;">text3</div>

<div style="-ms-grid-column:4; -ms-grid-row:2;">text4</div>

<div style="-ms-grid-column:4; -ms-grid-row:6;">text5</div>

<div id="Page1" style="-ms-flow-from: MyFlow;"></div>

<div id="Page2" style="-ms-flow-from: MyFlow;"></div>

<div style="-ms-grid-column:2; -ms-grid-row:2;
-ms-flow-from: MyFlow;"></div>

<div style="-ms-grid-column:2; -ms-grid-row:4;
-ms-flow-from: MyFlow;"></div>

<div style="-ms-grid-column:2; -ms-grid-row:8;
-ms-flow-from: MyFlow;"></div>

<div style="-ms-grid-column:4; -ms-grid-row:2;
-ms-flow-from: MyFlow;"></div>

<div style="-ms-grid-column:4; -ms-grid-row:6;
-ms-flow-from: MyFlow;"></div>

This demo allows you to create CSS3 Regions based on the W3C Editor's Draft of CSS3 Regions.