0

In this fiddle, https://jsfiddle.net/rpep00dg/7/, the content is prepended by an empty column in Chrome. If you open the fiddle in Firefox or Safari, there is no empty column before the "Header". This seems to be the case if the first element is any block level element like a p tag.

Is this a Chrome bug that is documented anywhere? Also are there any workarounds so it renders like Firefox and Safari?

section {
  page-break-inside: avoid;
  margin-bottom: 10px;
}

html {
  height: 100%;
}

body {
  column-count: 2;
  column-gap: 36px;
  width:100%;
  height: 100%;
  column-fill: auto;
}
<section>
<h1>Header</h1>
<section>
lsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl f
</section>
<section>
lsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl f
</section><section>
lsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl f
</section><section>
lsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl f
</section><section>
lsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl f
</section><section>
lsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl f
</section><section>
lsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl f
</section><section>
lsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl f
</section>
</section>
TylerH
  • 20,799
  • 66
  • 75
  • 101
Justin
  • 57
  • 6

1 Answers1

0

Couple of Issues Here:

You forgot to close section in your heading h1 tag. Close that and it will work fine in chrome.

Second:

Considering following for specific browsers:

-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
 column-count: 2; /*Default

I tested above code and it works as expected.

Hope it helps.

SG_Rowin
  • 622
  • 3
  • 19
  • The first `section` tag actually encompasses the rest of the html and is closed all the way at the bottom. That is just how the markup is in the project I'm working on. Don't have much room to change it. – Justin Aug 26 '16 at 19:43