1

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;
}
Sai
  • 801
  • 3
  • 10
  • 27

2 Answers2

1

<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.

Marcos Pérez Gude
  • 21,869
  • 4
  • 38
  • 69
0

I just tried replacing the main tag with a div and it works now, is there a reason why it wouldn't work with the main tag?

https://jsfiddle.net/gqdL46j4/3/

<div>
  <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>
</div>
Sai
  • 801
  • 3
  • 10
  • 27
  • Good find! Apparently, IE11 still doesn't know about `
    `. See also [MDN](https://developer.mozilla.org/en/docs/Web/HTML/Element/main). The problem in the original snippet would also be solved by giving `main` an explicit `display:block`. ([New fiddle](https://jsfiddle.net/gqdL46j4/4/).) The issue being that unknown elements are treated as inline, and inline elements can't contain columns.
     – Mr Lister Jul 29 '16 at 11:29
  • Thanks for that, I had no idea, also the display:block is a good tip, cheers – Sai Jul 29 '16 at 11:42