Question

I am wondering if there is an IE alternative to using column-count and column-gap?

I have made this post about creating a list that automatically create a new column for every fifth element. Leniel has suggested a solution that uses column-count and column-gap but this is not supported by IE. I am looking for a fall back solution.

Answer 1

I found this: Multi-column Layout with CSS3. Read the section titled CSS3 Multi-Column Browser Support. It states the following:

If you need to support browsers that don’t have multi-column support,
then you should have a fallback option for those browsers. Here is how
you can do it with the Modernizr script…

1. Place the following SCRIPT tag in your HEAD after any other style sheets:

   <script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.0.6/modernizr.min.js"></script> 
   

2. Add another SCRIPT below the above line that reads:

   <script>
   Modernizr.load({
     test: Modernizr.csscolumns,
     yep: 'columns.css',
     nope: 'no-columns.css'
   });
   </script> 
   

3. Create a CSS style sheet that includes your multi-columns CSS and save it as columns.css in the same directory.

4. Create a CSS style sheet that contains your fallback CSS (such as columns with float) and save it as no-columns.css in the same directory.
   Test your page in IE and Chrome, Safari, or Opera.

---

The page Multiple Columns provides a JavaScript fallback if you’re interested going this way.