Ie Alternative to Column-Count & Column-Gap

IE Alternative to Column-Count & Column-Gap

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.

How to fix CSS3 column-count for IE?

Multi-column layout is not supported by Internet Explorer, even version 9. However, current versions of Chrome, Firefox, Safari and Opera all handle CSS3 multi-column layout without a problem.

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.

I found a article on this: Read this

and here already a answer available for that : Question

multi columns not working in ie 11

Setting the style overflow: hidden; on the li tags seems to resolve this issue.

CSS column-count columns differ in height

You should try using

column-fill: balance;
-moz-column-fill: balance;
-webkit-column-fill: balance;

Source: https://www.w3.org/TR/css-multicol-1/#cf

It doesn't change much about your JSFiddle since columns are filled sequentially with this column-count CSS property, therefore the order of the elements stay unchanged. So if you do have big images first, and then a column made of small images, you may have columns of different sizes.

The column-fill: balance; property cannot do magic since it can't change the order.

Use JavaScript if you want to adapt the order of the elements in order to have columns of (more or less) equal length.

IE (11) improper handling of CSS multi-columns?

As I am myself very interested in this question I studied the spec and some examples of multi-column layouts.

First I have to say that the spec is horribly "imprecise"!

But it seems that any break definition has precedence over the column-count value (though I could not find it explicitly in the spec or anywhere else).

This only happens if, according to the multi-column pseudo-algorithm, the respective element, which sets the break point, is already part of the last column (as in your example fiddle).

The example given by @GCyrillus (see comments on question) just works, because the height setting forces the algorithm to first fill the given height before additional column boxes are created in the inline direction.

You can see the "original" effect, if you change the height from 20em to 10em!

So after all, I tend to say that it is not a bug and IE behaves correctly.

At least it might be an error or shortcoming of the multi-column algorithm to not recalculate or refill the columns so that despite any breaks the column-count value is respected. Logically this can only be done as long as the number of defined break points is one less than the column-count value.

As actually IE 10+ is the only browser supporting the multi-column module including the break-xy properties, it is hard to tell if the behaviour is right or wrong and how other browsers will handle this in the future!

For now, I would recommend to not use these properties at all.

column-count and column-width not respected

I answered a similar question here a few days ago: https://stackoverflow.com/a/46412808/5641669

However, I want to add something:

If the height of the container isn't fixed, the distribution of the items/text into columns always depends on the height of the first column. In your case, if the last item in your first column would be moved to the second column, the other columns would be less high (since they adjust their height according to the first column), so the items altogether wouldn't fit into 7 columns -> not possible.

So that fourth item is put into the first row to make it possible that all items fit into the number of columns defined by column-count. In this case, this results in only six colums having items in them, but 7 columns being there.

As I wrote before, the height of the whole container will always depend on the first column (i.e. if the height isn't fixed). The rest of the columns will just be filled according to that height (they won't get any higher than the first one), not according to an even distribution if items to the rest of the columns. Therefore, sometime the result can be a situation like yours, where the last column remains empty.

Using separator in column count

If my understanding of the question is correct, you can achieve this using the column-rule property. It is a shorthand property which comprises of column-rule-width, column-rule-color and column-rule-style. These three long-hand properties work exactly similar to border-width, border-color and border-style. column-rule-style supports all values that are supported by border-style.

Note that you can't produce rounded separators (that is, there is no equivalent of border-radius).

(The property still needs vendor prefixes in all browsers other than IE!.)

.channel_list {  padding: 0;  text-align: center; /* make the separator look like it is in middle */  -webkit-column-count: 3;  /* Chrome, Safari, Opera */  -moz-column-count: 3;  /* Firefox */  column-count: 3;    /* just for spacing */  -webkit-column-gap: 20px;  -moz-column-gap: 20px;  column-gap: 20px;}.channel_list li {  list-style: none;}.channel_list.solid {  -webkit-column-rule: 5px solid red;  -moz-column-rule: 5px solid red;  column-rule: 5px solid red;}.channel_list.dashed {  -webkit-column-rule: thin dashed chocolate;  -moz-column-rule: thin dashed chocolate;  column-rule: thin dashed chocolate;}.channel_list.dotted {  -webkit-column-rule: medium dotted rebeccapurple;  -moz-column-rule: thin dotted rebeccapurple;  column-rule: thin dotted rebeccapurple;}

<ul class="channel_list solid">  <li>    <input class="channels" type="checkbox" name="7" value="y"> Channel 1</li>  <li>    <input class="channels" type="checkbox" name="8" value="y"> Channel 2</li>  <li>    <input class="channels" type="checkbox" name="9" value="y"> Channel 3</li>  <li>    <input class="channels" type="checkbox" name="6" value="y"> Channel 4</li>  <li>    <input class="channels" type="checkbox" name="5" value="y"> Channel 5</li></ul><hr><ul class="channel_list dashed">  <li>    <input class="channels" type="checkbox" name="7" value="y"> Channel 1</li>  <li>    <input class="channels" type="checkbox" name="8" value="y"> Channel 2</li>  <li>    <input class="channels" type="checkbox" name="9" value="y"> Channel 3</li>  <li>    <input class="channels" type="checkbox" name="6" value="y"> Channel 4</li>  <li>    <input class="channels" type="checkbox" name="5" value="y"> Channel 5</li></ul><hr><ul class="channel_list dotted">  <li>    <input class="channels" type="checkbox" name="7" value="y"> Channel 1</li>  <li>    <input class="channels" type="checkbox" name="8" value="y"> Channel 2</li>  <li>    <input class="channels" type="checkbox" name="9" value="y"> Channel 3</li>  <li>    <input class="channels" type="checkbox" name="6" value="y"> Channel 4</li>  <li>    <input class="channels" type="checkbox" name="5" value="y"> Channel 5</li></ul>

Combining column-count and display: table renders single column in Firefox

Actually, I think Chrome and IE are the ones being wrong. They do give what you want, but they should not, like FF.

In your code you 'say' split-div-in-2-columns but essentially you put in only one ul. When you split your ul in two (see snippet) then FF works as expected, as do CH and IE BTW.

If I had created your code I actually would expect only one column, namely an ul of li's (or one div of p's, one p of span's, etc.). A second ul would be the second column (a second div..., etc.). Hence my conclusion that Chrome and IE mess up.

I hate unexpected behaviour like this, makes one unsure which browser is correct.

Here is the corrected code:

div {  -webkit-column-count: 2; /* Chrome, Safari, Opera */  -moz-column-count: 2; /* Firefox */  column-count: 2; /* demo code */}ul {  display: table;  margin: 0 auto;}

<div>  <ul>    <li>abcd</li>    <li>b</li>  </ul>  <ul>    <li>cdefg</li>    <li>d</li>  </ul></div>

Is there a way to break a list into columns?

The CSS solution is: http://www.w3.org/TR/css3-multicol/

The browser support is exactly what you'd expect..

It works "everywhere" except Internet Explorer 9 or older: http://caniuse.com/multicolumn

ul {
    -moz-column-count: 4;
    -moz-column-gap: 20px;
    -webkit-column-count: 4;
    -webkit-column-gap: 20px;
    column-count: 4;
    column-gap: 20px;
}

See: http://jsfiddle.net/pdExf/

If IE support is required, you'll have to use JavaScript, for example:

http://welcome.totheinter.net/columnizer-jquery-plugin/

Another solution is to fallback to normal float: left for only IE. The order will be wrong, but at least it will look similar:

See: http://jsfiddle.net/NJ4Hw/

<!--[if lt IE 10]>
<style>
li {
    width: 25%;
    float: left
}
</style>
<![endif]-->

You could apply that fallback with Modernizr if you're already using it.

How to prevent column break within an element?

The correct way to do this is with the break-inside CSS property:

.x li {
    break-inside: avoid-column;
}

Unfortunately, as of October 2021, this is still not supported in Firefox but it is supported by every other major browser. With Chrome, I was able to use the above code, but I couldn't make anything work for Firefox (See Bug 549114).

The workaround you can do for Firefox if necessary is to wrap your non-breaking content in a table but that is a really, really terrible solution if you can avoid it.

UPDATE

According to the bug report mentioned above, Firefox 20+ supports page-break-inside: avoid as a mechanism for avoiding column breaks inside an element but the below code snippet demonstrates it still not working with lists:

.x {
    column-count: 3;
    width: 30em;
}

.x ul {
    margin: 0;
}

.x li {
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside:avoid;
    -moz-page-break-inside:avoid;
    page-break-inside: avoid;
    break-inside: avoid-column;
}

<div class='x'>
    <ul>
        <li>Number one, one, one, one, one</li>
        <li>Number two, two, two, two, two, two, two, two, two, two, two, two</li>
        <li>Number three</li>
    </ul>
</div>

Ie Alternative to Column-Count & Column-Gap