title: CSS3 column-count: 2 + height: 100% cut off images
body: <p>In the process of displaying a bunch of paragraph &lt;p&gt; elements with quite a few &lt;div&gt; mixed-in, so they are shown nicely with the effect of an opened book, I set &lt;html&gt; to</p>
  
  <pre><code>html {
    width: 100%;
    height: 100%;
  }
  </code></pre>
  
  <p>and &lt;body&gt; to</p>
  
  <pre><code>body {
    column-count: 2;
    height: 100%;
  }
  </code></pre>
  
  <p>They all work nicely except the images are cut off and display to "next page", i.e., pictures are split to display in 2 columns.</p>
  
  <p>I tried setting</p>
  
  <pre><code>img {
    display: inline-block;
  }
  </code></pre>
  
  <p>in attempt to reinstate the image's integrity, but without luck. Any help would be appreciated.</p>
  
  <p>Thanks</p>