CSS3 Multi Column Layout Ie Workaround

CSS3 multi column layout IE workaround

Maybe the Columnizer jQuery Plugin?

Unfortunately, it doesn't parse your stylesheet and look for the relevant properties like CSS3 PIE does (a very convenient feature).

Both CSS3 PIE and that plugin rely on JavaScript.

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.

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

Block Elements Inside Multicolumn Layout - Padding Issue In Chrome/IE

On the first JSFiddle, I found adding to the li

display: inline-block;
width: 100%;

Worked to align the elements and fill the column width.

Edit:

The above currently works in both Firefox and Chrome perfectly. On IE, I also have to set the li to box-sizing:border-box;, because specifying width while padding is specified causes an overflow otherwise. Link to updated version of the original Fiddle, now working in all major browsers:

http://jsfiddle.net/6cVqZ/40/

Different width CSS columns

There is NO CORRECT way to set different column widths with CSS columns.

Why it won't work

column-width property only species the optimal width. The final output will be stretched or shrinked based on the available parent width. So it is not the right property to use when you need fixed or different column widths.
Ex:

div {
width: 100px;
column-width: 40px;
}

There is room for two 40px wide columns inside the 100px wide element. In order to fill the available space the actual column width will be increased to 50px.

div {
width: 40px;
column-width: 45px;
}

The available space is smaller than the specified column width and the actual column width will therefore be decreased.

Tweak

In case you have 2 columns, you can set a -ve margin-right to get different column widths. This works with more than 2 columns but is limited to just 2 widths.

Feasible Solution

You can use tables or display:table instead to achieve similar results.

CSS multi-column layout with column gap not changing on window resize

This is tricky. The container's entire width is divided into columns, so you can't have both a fixed column-width and column-gap. As the container's width changes, the browser wants to fill the container. See Fixed gap between CSS columns.

You could manage the width of .container: (see jsfiddle)

@media (min-width: 480px) { .container { width: 480px; } }
@media (max-width: 480px) and (min-width: 360px) { .container { width: 360px; } }

...but that's a lot of queries to manage!

Does vertically-ordered images matter? If rows are fine, you could abandon CSS3 columns:

img { display: inline-block; width: 100px; height: 70px; margin-right: 20px;}

Similarly, you could float:

img { float: left; width: 100px; height: 70px; margin-right: 20px;}

I haven't used them, and there is no IE support yet, but you could try CSS3 Flexboxes.

None of these are pretty, but I don't know of a beautiful solution...maybe CSS4 will save us?

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

  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.



Related Topics



Leave a reply



Submit