Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

IE Alternative to Column-Count & Column-Gap

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.

like image 956
Jon Avatar asked Sep 06 '12 18:09

Jon


People also ask

Can I use CSS column-count?

column-count can be auto or an integer. Use auto if you are also using column-width . Think of it as a way of telling the browser, to let column-width take the lead. The integer, also known as the number of columns, must be greater than or equal to 0.

Which css3 property allows you to control the amount of vertical columns in an html5 document?

column-rule-width.


1 Answers

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.

like image 169
Leniel Maccaferri Avatar answered Sep 21 '22 05:09

Leniel Maccaferri