0

https://jsfiddle.net/6g6176zs/1/ 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.

I know you can put column-span:all on only the p's that contain images, but is there a way, without knowing which <p> contains a wide image (or table or what have you), to ensure the text flows around the image (like with floats)?

Ideally, text would flow such that it fills columns as well as possible up to column-width: enter image description here

css:

body {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
 -webkit-column-width: 50px;
 -moz-column-width: 50px;
  column-width: 50px;
}

html:

<html>
<head> <title>column-clear</title> </head>  
<body>
<p> <img src="http://bildr.no/image/bHEvbVFz.jpeg"/> </p>    
<p>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.    </p>
<p>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.    </p>
</body>
</html>
TylerH
  • 20,799
  • 66
  • 75
  • 101
unhammer
  • 4,306
  • 2
  • 39
  • 52
  • After searching for hours, I had sort of come to the same conclusion :-/ but had to ask in case I missed something obvious – unhammer Mar 13 '16 at 17:10
  • I was going to say no until I found this. http://alistapart.com/article/crosscolumn. It looks like it explains cross column knock outs and insertions. If this works for you. let know and i'll write it up as an answer. – STEAMworks Learning Center Mar 13 '16 at 22:20
  • @mpactMEDIA Yeah, that probably looks nice when it's been fine-tuned to a particular article, but requires not only knowing that there's a big image inside the `

    `'s, but also their exact sizes. I guess one could write a js lib to make it work for any article that you don't know the contents of, but it does seem that a size-agnostic pure CSS solution is currently impossible.

     – unhammer Mar 14 '16 at 08:12
  • I agree, but thought it was worth throwing it in the mix. – STEAMworks Learning Center Mar 14 '16 at 08:22

0 Answers0