Animate position of items in CSS3 Column layout


I've created a CSS column layout with some rectangle divs inside. This is my code.

When user clicks on each of them, it should remove. I've added CSS3 transition to it:

-webkit-transition: all 0.3s ease-in; /*Safari & Chrome*/
-moz-transition: all 0.3s ease-in; /* Firefox 4 */
-o-transition: all 0.3s ease-in; /* Opera */
transition: all 0.3s ease-in;

now the item which is clicked removes with effect, but other rectangles (after this div) changing their places without any effect.

How to add effect to other items when they are changing places? Is it possible with CSS3 Columns? If not, Which method should I prefer? How?

Note: I'm going to create something like Windows 8 Start menu; when you remove a tile inside it, other items will move to their new position with animation.

Problem courtesy of: Mahdi Ghiasi


I made the divs display: block and gave them float: left, is this the effect you are looking for?

Solution courtesy of: skyline3000


I would surround each of your box with a container, with

overflow: hidden
max-height: 999px
display: inline-block

And animate this container to max-height: 0 when removing a box. You could get the surrounding box with "parent". Then you let your box beeing animated:

surrounding-container {
transition: all 0.2s linear;

This will get the effect.

Edit: Here's the fiddle:

Discussion courtesy of: tobspr

This recipe can be found in it's original form on Stack Over Flow.