I would like very much to create a web page which would have the same appearence of, say, Microsoft Word or Acrobat Reader when the zoom level is small and it shows side-by-side pages with page borders.
What I don't have idea what to do is to define a fixed size paperborder and throw the content inside it (which would be a variable number of html block elements), and make these elements "flow" from one page to the other, creating as much pages as needed with appropriate page breaks. This is intended to simulate printed output, for quick design-study prototyping.
Something in my mind tells javascript would be necessary, but since my knowledge of javascript is close to zero, and I want hardly to learn CSS3 layout tricks, pure CSS would be preferred (although the JS solution would be a nice alternative).
A current single page document is as follows:
<!DOCTYPE html>
<html lang="pt-br" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>Relatório Html</title>
<style type="text/css">
html, body {
margin:0;
padding:0;
}
body {
background-color: #aaa;
}
.paperpage {
position: absolute;
width: 600px;
padding: 50px 30px 40px 30px;
margin-left: -320px;
left: 50%;
top:10px;
bottom:10px;
background-color: white;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}
#innerpage {
position: relative;
margin: 0 auto;
height: auto !important;
min-height: 100%;
}
</style>
</head>
<body>
<div class="paperpage">
<div id="innerpage">
<p>Some Content</p>
</div>
</div>
</body>
</html>