CSS column-count property results in the 1st column being lower than the others

[Andrew ("Andy") Tait]

Hello,

When using the CSS column-count property on a div, the 1st column ends up one line lower than the others.

Here's some example code, done by adding a div with the style "column-count: 2" to the intro of the Paged HTML Document template.

Here's the result:

I've tried adding a bunch of other properties to try to fix it to no avail:

I even tried using some javascript to fix it, but no luck also:

Any help you could give would be much appreciated!

[Andrew ("Andy") Tait]

Hi,

I managed to resolve the issue by first making a class (".reportcols") which would apply the style I wanted ("column-count:2; column-fill: balance;").
Then I applied another line of code that would target all elements under it, and apply a margin top of zero pixels.

Like so:

.reportcols { 
  -webkit-column-count: 2;
  -moz-column-count:2;
  column-count:2;
  -webkit-column-fill: balance;
  -moz-column-fill: balance;
  column-fill: balance;
}


.reportcols * {
  margin-top: 0px;
}