IE Alternative to Column-Count & Column-Gap

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.

score 8 · Accepted Answer · answered Sep 07 '12 at 06:13

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

I prefer not to use javascript to detect internet explorer, I use conditional comments: `
Your html code here...
` In your css, you can make selectors like this: `#ie-9-or-older #page{ /*some css for your ie*/ }` — Lajos Mészáros, Feb 19 '13 at 09:23
If you prefer to use jquery.columnizer.js, here's a nice Modernizer script snippet. https://gist.github.com/jimmynotjim/3666470 — Micah, Aug 27 '13 at 20:48

score 4 · Answer 2 · edited Sep 24 '14 at 12:33

Here is solution how to make menu with multicolumns which looks the same as the one created with column-count property and works in ALL BROWSERS.

This is done with floating elements, but the trick here is to re-order the elements in javascript (or server side) so they natural flow looks as up-down instead left-right

Item1 Item4 Item7

Item2 Item5 Item8

Item3 Item6

Example: http://jsfiddle.net/xrd5Y/16/

// number of columns
var columns = 4;

var $ul = $('ul.multicolumn'),
    $elements = $ul.children('li'),
    breakPoint = Math.ceil($elements.length/columns);
    $ordered = $('<div></div>');

function appendToUL(i) {
    if ($ul.children().eq(i).length > 0) {
        $ordered.append($ul.children().eq(i).clone());
    } 
    else $ordered.append($('<li></li>'));
}

function reorder($el) {
    $el.each(function(){
        $item = $(this);

        if ($item.index() >= breakPoint) return false;

        appendToUL($item.index());
        for (var i = 1; i < columns; i++) {
            appendToUL(breakPoint*i+$item.index());
        }
    });

    $ul.html($ordered.children().css('width',100/columns+'%'));
}

reorder($elements);

score 2 · Answer 3 · answered Jun 11 '13 at 22:07

2

Here's what works for me: Rather than using JS or a IE-only conditional you can use Modernizr's classes directly in your stylesheet.

If you do an Inspect Element on our webpage, you will see that there are many CSS classes added in the html tag:

If you do an Inspect Element on our webpage, you will see that there are many CSS classes added to the html tag

If the user's browser does not support css columns you will see a "no-csscolumns" class that you can use to float elements.

answered Jun 11 '13 at 22:07

Devin Walker

540
3
8

Note: you won't see Modernizr generated `CSS` classes in the Browser's view source code. Use `Firebug` for Firefox as shown in the screenshot above or some other DOM viewer... :) Take a look here: http://stackoverflow.com/a/7835579/114029 – Leniel Maccaferri Jun 14 '13 at 23:03

Boris Aivazian · Answer 4 · 2016-03-24T07:12:25.460

Here is simple solution I discovered for IE and IE Edge just separate each column by paragraph <p> your text </p>, column-2 <p> your text </p>, it worked for me.

#subfootera {
    with:100%;
    text-align:left;
    padding-top: 20px;
    padding-bottom: 20px;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #000;
    text-shadow:1px 1px 1px #999;

}

.subfooterb {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    -webkit-column-gap: 10px; /* Chrome, Safari, Opera */
    -moz-column-gap: 10px; /* Firefox */
    column-gap: 10px;
}

  <div id="subfootera">
    <div class="subfooterb">
    <p>Your Text.</p>
    <p>Your text or an img</p>
     </div>
  </div>

IE Alternative to Column-Count & Column-Gap

4 Answers4

Linked