Sai Sai - 4 months ago 7
CSS Question

css column count ignored on IE11

This is a issue I have on my site, I have recreated the problem on js fiddle, I am trying to create 5 columns using section tags with an even width using column count, this works fine on chrome/firefox/edge, however on Internet explorer 11 it is ignored and displays the sections as blocks.

I read that column count should be supported by IE so it's very confusing as to why it is being ignored, is this a bug or am i doing something wrong?
my fiddle is below

https://jsfiddle.net/gqdL46j4/

html

<main>
<section>
<h1>Test1</h1>
</section>
<section>
<h1>Test2</h1>
</section>
<section>
<h1>Test3</h1>
</section>
<section>
<h1>Test4</h1>
</section>
<section>
<h1>Test5</h1>
</section>
</main>


css

main {
-webkit-column-count: 5;
-moz-column-count: 5;
column-count: 5;
}

section {
width: 100%;
display:inline-block;
}

Answer

<main> tag is not supported by IE. It only is supported by Firefox + Chrome + Edge:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main

That's the reason why it doesn't work with columns.