title: with css column-count / column-width, can I make text flow around large images?
body: <p><a href="https://jsfiddle.net/6g6176zs/1/" rel="nofollow noreferrer">https://jsfiddle.net/6g6176zs/1/</a> is a simple 2-column CSS layout, where the image is so wide it spans several columns, but unfortunately the text goes over the image.</p>
  
  <p>I know you can put <code>column-span:all</code> on only the p's that contain images, but is there a way, without knowing which <code>&lt;p&gt;</code> contains a wide image (or table or what have you), to ensure the text flows around the image (like with floats)? </p>
  
  <p>Ideally, text would flow such that it fills columns as well as possible up to column-width:
  <a href="https://i.stack.imgur.com/WDfVR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WDfVR.png" alt="enter image description here"></a></p>
  
  <hr>
  
  <p>css:</p>
  
  <pre><code>body {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
   -webkit-column-width: 50px;
   -moz-column-width: 50px;
    column-width: 50px;
  }
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt; &lt;title&gt;column-clear&lt;/title&gt; &lt;/head&gt;  
  &lt;body&gt;
  &lt;p&gt; &lt;img src="http://bildr.no/image/bHEvbVFz.jpeg"/&gt; &lt;/p&gt;    
  &lt;p&gt;Id reiciendis rerum illum ut minus eos reiciendis et. Odio vel non autem. Et in ut harum quaerat repellat maxime vel odit. Mollitia inventore officia voluptas et.Vitae assumenda harum et omnis. Qui eum in explicabo molestiae. Et reiciendis non vel blanditiis et maxime. Rerum odit recusandae ipsa. Ea ut in aut cum numquam dolores eos velit. Quia sit est velit fugiat ipsum ut doloremque mollitia.Sit dolorem sunt quia officia nihil corporis eos dolores. Dolores consequatur est quisquam laboriosam deserunt. Ipsa illo tempore tempora et sed. Est quisquam rem blanditiis ullam non unde magni. Non blanditiis aut fugit alias magnam.Hic qui minima et est quasi. Ducimus quos odio voluptatibus temporibus ipsa sunt. Harum reprehenderit dolores soluta ut itaque. Qui ipsa suscipit nisi.Debitis quibusdam exercitationem ex quos doloremque et minima ut. Suscipit saepe et voluptatem. Voluptatem suscipit ut odio. Possimus ut expedita vel ex sequi nesciunt dolor debitis. Sed iusto consequatur labore animi sint qui inventore blanditiis. Ut qui velit nobis esse.    &lt;/p&gt;
  &lt;p&gt;Id reiciendis rerum illum ut minus eos reiciendis et. Odio vel non autem. Et in ut harum quaerat repellat maxime vel odit. Mollitia inventore officia voluptas et.Vitae assumenda harum et omnis. Qui eum in explicabo molestiae. Et reiciendis non vel blanditiis et maxime. Rerum odit recusandae ipsa. Ea ut in aut cum numquam dolores eos velit. Quia sit est velit fugiat ipsum ut doloremque mollitia.Sit dolorem sunt quia officia nihil corporis eos dolores. Dolores consequatur est quisquam laboriosam deserunt. Ipsa illo tempore tempora et sed. Est quisquam rem blanditiis ullam non unde magni. Non blanditiis aut fugit alias magnam.Hic qui minima et est quasi. Ducimus quos odio voluptatibus temporibus ipsa sunt. Harum reprehenderit dolores soluta ut itaque. Qui ipsa suscipit nisi.Debitis quibusdam exercitationem ex quos doloremque et minima ut. Suscipit saepe et voluptatem. Voluptatem suscipit ut odio. Possimus ut expedita vel ex sequi nesciunt dolor debitis. Sed iusto consequatur labore animi sint qui inventore blanditiis. Ut qui velit nobis esse.    &lt;/p&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>