Question

I want to use CSS column-count for the divs inside a block. However, since some browsers (eg. IE 9) do not support column-count, I want to set float:left for the divs inside the block.

But if I do that, column-count will behave in a strange way in Firefox. It works fine in Firefox if I do not use float:left, while it works fine in Chrome with and without float. Please see the attached image.

So, how can I use the column-count and float:left together.

Here’s the JSFiddle Link: http://jsfiddle.net/V8KV6/1/

And here’s the code:

HTML:

   <div class="block">
       <div class="column"></div>
       <div class="column"></div>
       <div class="column"></div>
       <div class="column"></div>
       <div class="column"></div>
   </div>

CSS:

.block{
    width: 300px;
   -webkit-column-count:3;
    -moz-column-count:3;     
}

.column{
    background: orange;
    width: 100px;
    height: 100px;
    margin-bottom: 20px;
    float: left;      
}

Answer 1

You could use an IE conditional statement:

http://www.quirksmode.org/css/condcom.html

<!--[if IE]>
 According to the conditional comment this is IE
<![endif]-->