For years I have been struggling with this problem and now finally I will show you what I mean by showing a typical css multicolumn layout, where the text shift vertically around, instead of neatly being aligned to a horizontal baseline grid!
Examine both code snippets below, you see that after a <br> break, the text no longer aligns to its original "baseline" grid and the lines become unreadably misaligned. In the first code snippet I try to inters only one <br> and tried to have it set to jump exactly two lines. In the second tryout I removed the p br{} and just inserted two <br><br>, which also results in misalignment of the paragraph text. HOW can we make all text in all columns align (via CSS only!) to the same baseline horiontal grid? Now I feel this has to do with the drop cap capital initial letter but have not found how/why to make it all look neat.
The result needs only to work on the newest versions of the major browsers FireFox, Chrome, InternetExplorer and Safari.
p br{
display: block;
margin: 0 0 2em 0;
}
article {
width: 1000px;
height: 520px;
background-color: #ECC;
text-align: justify;
word-spacing: -1pt;
line-height: 30px;
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 12px;
-moz-column-gap: 12px;
column-gap: 12px;
}
p:first-of-type:first-letter {
float: left;
font-size: 60px;
margin: 11px 7px -9px -4px;
font-weight: normal;
line-height: 60px;
}
p br {
display: block;
margin: 0 0 2em 0;
}<article>
<p>
Om de temperatuur constant te houden, moet de verloren gegane energie weer toegevoegd worden. In een (ongeïsoleerde) doorsnee woning gaat 75% van het totale energieverbruik rechtstreeks naar verwarmen. De belangrijkste reden om goed te isoleren is energiebesparing en comfortverhoging. Het binnenoppervlak van een geïsoleerde woning voelt warmer aan dan dat van een ongeïsoleerde woning. Deze hogere temperatuur zorgt voor extra stralingswarmte.<br>
Verwarmen en koelen kan ook op manieren dat het geen enkele energie meer nodig is. Een experiment in hoeverre dit mogelijk is vergt het uiterste van twee natuurlijke processen: isolatie en ventilatie. Op de meeste plaatsen in de wereld is de warmte van de zon en de inwendige warmteproductie (van elektrische apparaten) onvoldoende om het hele jaar door in de leefruimtes een aangename binnentemperatuur te bereiken: er is verwarming nodig. Indien de binnentemperatuur hoger is dan de buitentemperatuur ontstaat volgens de wetten van Fourier energietransport door de schil van een gebouw (muur, dak, vloer).<br>
Om de temperatuur constant te houden, moet de verloren gegane energie weer toegevoegd worden. In een (ongeïsoleerde) doorsnee woning gaat 75% van het totale energieverbruik rechtstreeks naar verwarmen. De belangrijkste reden om goed te isoleren is energiebesparing en comfortverhoging. Het binnenoppervlak van een geïsoleerde woning voelt warmer aan dan dat van een ongeïsoleerde woning. Deze hogere temperatuur zorgt voor extra stralingswarmte.<br>
Ook condenseert waterdamp minder snel op een warm oppervlak. De vacht of het verenkleed van dieren dient hetzelfde doel. De waterdamp migreert dan door de wand en de isolatie, om daarin te condenseren. Om die condensatie te voorkomen wordt dampdichte folie aangebracht, die de migratie van verse lucht ook belemmert, waardoor warmteverliezende ventilatieroosters moeten worden toegepast.</p>
</article>article {
width: 1000px;
height: 520px;
background-color: #ECC;
text-align: justify;
word-spacing: -1pt;
line-height: 30px;
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 12px;
-moz-column-gap: 12px;
column-gap: 12px;
}
p:first-of-type:first-letter {
float: left;
font-size: 60px;
margin: 11px 7px -9px -4px;
font-weight: normal;
line-height: 60px;
} <article>
<p>
Om de temperatuur constant te houden, moet de verloren gegane energie weer toegevoegd worden. In een (ongeïsoleerde) doorsnee woning gaat 75% van het totale energieverbruik rechtstreeks naar verwarmen. De belangrijkste reden om goed te isoleren is energiebesparing en comfortverhoging. Het binnenoppervlak van een geïsoleerde woning voelt warmer aan dan dat van een ongeïsoleerde woning. Deze hogere temperatuur zorgt voor extra stralingswarmte.
<br>Verwarmen en koelen kan ook op manieren dat het geen enkele energie meer nodig is. Een experiment in hoeverre dit mogelijk is vergt het uiterste van twee natuurlijke processen: isolatie en ventilatie. Op de meeste plaatsen in de wereld is de warmte van de zon en de inwendige warmteproductie (van elektrische apparaten) onvoldoende om het hele jaar door in de leefruimtes een aangename binnentemperatuur te bereiken: er is verwarming nodig. Indien de binnentemperatuur hoger is dan de buitentemperatuur ontstaat volgens de wetten van Fourier energietransport door de schil van een gebouw (muur, dak, vloer).<br>
Om de temperatuur constant te houden, moet de verloren gegane energie weer toegevoegd worden. In een (ongeïsoleerde) doorsnee woning gaat 75% van het totale energieverbruik rechtstreeks naar verwarmen. De belangrijkste reden om goed te isoleren is energiebesparing en comfortverhoging. Het binnenoppervlak van een geïsoleerde woning voelt warmer aan dan dat van een ongeïsoleerde woning. Deze hogere temperatuur zorgt voor extra stralingswarmte.<br>
Ook condenseert waterdamp minder snel op een warm oppervlak. De vacht of het verenkleed van dieren dient hetzelfde doel. De waterdamp migreert dan door de wand en de isolatie, om daarin te condenseren. Om die condensatie te voorkomen wordt dampdichte folie aangebracht, die de migratie van verse lucht ook belemmert, waardoor warmteverliezende ventilatieroosters moeten worden toegepast.</p>
</article>Could be a little late for an answer, but nonetheless. By removing the default margin, the alignment of lines behaves like you want:
p {
margin:0;
}