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 automat

Answer 1

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);

Answer 2

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>

Answer 3

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 the user's browser does not support css columns you will see a "no-csscolumns" class that you can use to float elements.

Answer 4

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.