csswg-drafts/css-multicol/tests/01.html at e048c1cd4a99d609fee3e7dc0e5375cf24dbbb55 · CodeRedDigital/csswg-drafts · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Suggestion for Multi Column Layout scrolling issue</title>
<style type="text/css" media="all">
div {
	border: thin solid blue;
	padding: 5px;
	column-count: 3; -webkit-column-count: 3; -moz-column-count: 3;
	column-rule: 1px solid #696969; -webkit-column-rule: 1px solid #696969; -moz-column-rule: 1px solid #696969;
	column-gap: 10px; -moz-column-gap: 10px; -webkit-column-gap: 10px;
	font: 16px/20px sans-serif;
	height: 70px;
	margin-top: 2em;
}
</style>
</head>
<body>

<h1>Suggestion for problem of scrolling using CSS Multi-column Layout</h1>

<div>
		<p>
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In quis ligula at lorem iaculis scelerisque. Integer suscipit purus nec odio. Nulla dolor sem, varius vel, venenatis non, lacinia vel, justo. Morbi vel sapien nec nisl rutrum varius. Mauris tortor. Morbi odio. Integer neque orci, varius et, vulputate posuere, porttitor at, diam. Nunc dictum neque in libero. Aliquam vitae quam at metus pretium mattis. Mauris aliquam fermentum metus. Proin ornare. Praesent risus erat, pharetra ac, sagittis sed, sagittis at, metus. Integer diam justo, imperdiet eget, rhoncus nec, volutpat id, mauris.
			</p>
</div>

</body>
</html>