Bug in column-width property for IE/Windows Store Apps. See jsfiddle in description.

Question

Hi,

I noticed the column-width property for IE has a bug. Below is a link to a jsfiddle:

http://jsfiddle.net/xcrico/3qfvm/

http://jsfiddle.net/xcrico/3qfvm/1/

If you try it in chrome and firefox, they act just like floats where they realize the height of the containing element won't fit another div so it moves it over to the next column. However, in IE it stays in the same column. This is a huge bug in my development for Metro/Modern applications considering the way that the UI is set up is to scroll horizontally. So when I dynamically get data and generate little tiles on the screen, I want them to fill up vertically, and if there is no more space, move over to the next column.

If there is a way around this, please let me know.

Thanks,

Jon

Answer 1

Also, I have another question. I noticed if I set the height to be 500 instead, it still does the same thing. However, in chrome and firefox, the third div is split among the first column and the second. Why would they have it like this in the spec for CSS3? I would think they would want it to be more like floats, where the whole div would go to the next column since the height does not fit in the current column. Anybody have a way around this:

It won't let me add a link here, but if you replace the 1 with a 2 in the previous jsfiddle, you will see what I am talking about (use chrome or firefox).

Thanks,

Jon