css-regions-1/examples/linked-boxes.html

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title></title>
  <style>
  	body {
  		width: 170px;
  		-border: thin black solid;
  		padding: 10px;
  		position: relative;
  		font-family: sans-serif;
  	}
		aside {
			border: thin black solid;
			border-radius: 10px;
			background-color: lightgreen;
			text-align: center;
			margin: 0px 40px;
			font-size: 24px;
		}
		article {
			font-size: 10px;
			-webkit-flow-into: article-flow;
		}
		.off-screen {
			position: absolute;
			top: 250px;
			left: 0px;
			width: 190px;
			height: 175px;
			background-color: lightgray;
			opacity: .5;
			z-index: 1;
		}
		.region {
			-webkit-flow-from: article-flow;
		}
		.top {
			max-height: 200px;
		}
  </style>
</head>
<body lang="en">
	<div class="off-screen"></div>
  <article>
  	<h1>Article</h1>
  	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, cupiditate rerum et commodi ea repellat placeat exercitationem perferendis assumenda voluptatibus. Aliquam, consectetur sed fuga praesentium velit. Necessitatibus, nostrum doloremque eius.</p>
  	<p>Tur? Henis eictur aut veliqui audaes senia placeresci dolum num aut utam, volor sum re inctatiat pero volut evel in res vel eos ea velectempos et a sum voloribus elit, optas rerro blabore am volorese poria parit aut ute conse et quo venimint accum vollupta veligna tquati conse evendi nem eos et, eat lant.
		<p>Necta sequam quas voloreperum cust rem quas simus. Eveliquam repre que ipsum sincte con eumetur?
		<p>Estet aut eicipsa parum, sus, suntece rionesecta commolo rionem destruptat hari omniendam quaspe voloreh endeliquos cum nonse pos vellati di dolupta tempedis eata nimperempos es dicient volor acienieni quisqua spernat.
  </article>
  <div class="top region"></div>
  <aside>Aside</aside>
  <div class="region"></div>
</body>
</html>