Question

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.

Answer 1

I made the divs display: block and gave them float: left, is this the effect you are looking for? http://jsfiddle.net/AQ7bp/22/