Given: a clean page with one <article> containing some <p> paragraphs and a full width <img>.
I want the css multi-columns to flow not as in A, but as in B sothat the paragraphs flow from top-to-bottom and then from left-to-right. The <img> should stop this flowing and fill up the full article width. After that several more paragraphs again in the same fashion as B until the end of the same <article>.
At the moment, all works, except that the columns flow as in A, not as in B. What smart rule(s) have I overlooked in CSS?
- I don't want to touch the clean HTML here. No extra elements, classes, or ids.
- Adding only CSS for selecting and styling the current existing elements:
article,p,img - Only one
<article>.....</article>element, so no article splitting before-and-after img!
article p{
width: 500px;
margin: 0;
text-align: justify;
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-gap: 24px;
-moz-column-gap: 24px;
column-gap: 24px;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
font-style: normal;
font-size: 14px;
line-height: 20px;
letter-spacing:-0.7px;
word-spacing: -0.7px;
color: #000;
}
article p:nth-of-type(n+2) {
text-indent: 2em;
margin-top: 20px;
}
img{
width:500px;
height:auto;
margin-top: 20px;
}<article>
<p>Ventilatie is noodzakelijk voor een gezond binnenklimaat in ruimten waar mensen verblijven en gebeurt door koolzuurgas, vocht en verontreiniging af te voeren en verse lucht aan te voeren. De luchtverontreiniging kan van verschillende aard zijn (bijvoorbeeld sigarettenrook, bacteriën en schimmelsporen, chemische stoffen, stof, geurstoffen).</p>
<p>De noodzakelijke hoeveelheid te verversen lucht (debiet) hangt af van de productie van vocht, koolstofdioxide (CO²) en verontreiniging en de aard van de verontreiniging, en van het aantal mensen die in die ruimten verblijven. Spuiventilatie of luchten is niet hetzelfde als de hier genoemde ventilatie, maar heeft ten doel in korte tijd sterk verontreinigde binnenlucht af te voeren of te spuien. Dit kan worden bereikt door ramen en/of deuren tegen elkaar open te zetten.</p>
<img src="https://static.pexels.com/photos/23049/pexels-photo.jpg" alt=""/>
<p>Bij de meeste woningen gebeurt de ventilatie ongecontroleerd: doordat de wind in kieren en spleten waait, ververst de lucht. Dit zorgt in vele gevallen voor overbodige ventilatie, een onaangenaam binnenklimaat en dus ook voor warmteverliezen.</p>
<p>Men kan dit verminderen door tijdens het bouwen en onderhoud aandacht te besteden aan luchtdichtheid. Meestal wordt daarvoor een dampscherm geplaatst tegen de isolatie. Men dient rekening te houden met de vochthuishouding: als de warme vochtige binnenlucht kan doordringen tot in de isolatie zal deze lucht afkoelen naarmate de buitenmuur benaderd wordt, waardoor er condensatie kan optreden die de isolatiewaarde weer doet verminderen en is een dampdichte laag nodig om het damptransport te verminderen. Om dit makkelijker te onthouden zijn de dampremmende folies meestal rood (warm; binnenkant) en de damp-open folies blauw.</p>
<p>Ventilatie is noodzakelijk voor een gezond binnenklimaat in ruimten waar mensen verblijven en gebeurt door koolzuurgas, vocht en verontreiniging af te voeren en verse lucht aan te voeren. De luchtverontreiniging kan van verschillende aard zijn (bijvoorbeeld sigarettenrook, bacteriën en schimmelsporen, chemische stoffen, stof, geurstoffen).</p>
</article>
