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.
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.
column-rule-width.
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...
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>
Add another SCRIPT below the above line that reads:
<script>
Modernizr.load({
test: Modernizr.csscolumns,
yep: 'columns.css',
nope: 'no-columns.css'
});
</script>
Create a CSS style sheet that includes your multi-columns CSS and save it as columns.css in the same directory.
The page Multiple Columns provides a JavaScript fallback if you're interested going this way.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With