title: CSS: Multi-Column, Multi-Page layout like an open book
body: <p>Is it possible to create a two-column, multi-page layout with HTML and CSS as shown in this mockup where content automatically flows from 1 → 2 → 3 → 4 → …?</p>
  
  <p><a href="https://i.stack.imgur.com/suZSs.png" rel="noreferrer"><img src="https://i.stack.imgur.com/suZSs.png" alt="book layout"></a></p>
  
  <p>I'm building an eBook reader/writer. Essentially the layout is similar to that of a desktop word processing app like Word or Pages:</p>
  
  <ul>
  <li>Two pages next to each other filling the screen ("left" and "right" page if you open a book)</li>
  <li>The next two pages below, scrolling vertically, etc. (imagine turning a page in a book)</li>
  <li>Text flows automatically from one page to the next 1 → 2 → 3 → 4 → ... </li>
  </ul>
  
  <p>I experimented with the CSS Multi-column Layout Module<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts" rel="noreferrer">¹</a>. Getting two columns is straight forward, but I could not figure out how to "break" at the viewport height into multiple "two-column" layouts, one for each set of "left &amp; right" pages.</p>
  
  <p><strong>CLARIFICATION:</strong></p>
  
  <p>The content is essentially one big <code>&lt;div contenteditable="true"&gt;</code>. Its contents need to flow automatically across the pages.</p>
  
  <pre><code>&lt;div id="bookeditor" contenteditable="true"&gt;
      Book contents go here...
      Wrap from page to page, from row to row...
  &lt;/div&gt;
  </code></pre>
  
  <p>1: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts" rel="noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts</a></p>