Stack div boxes into two columns. But when box on the right is removed, all boxes after it should line up accordingly

Question

I have div boxes of identical heights and widths stacked up into two columns, like so: enter image description here

Is it possible to make it behave in such a way that...when any of the boxes on the left is removed (using jQuery), the top-most box on the right will move the bottom spot on the left. So essentially, the boxes moving in the direction indicated by the pink arrow.

yes it is possible, it depends on your html and css – Sep 06 '12 at 06:43 — , Sep 06 '12 at 06:43
any leads i can look into as how to execute it? – Kama Sep 06 '12 at 06:51 — Kama, Sep 06 '12 at 06:51

score 2 · Accepted Answer · edited May 23 '17 at 12:30

2

You can add remove event and check it on your div box. And then append first element to another column

$('.yourDivBox').bind('remove', function() {
$('.secondColumn').first().appendTo('.firstColumn');
});

Something like this. Sorry I haven't time to check my code

edited May 23 '17 at 12:30

Community

1
1

answered Sep 06 '12 at 07:03

aDaemon

131
3

score 0 · Answer 2 · answered Sep 06 '12 at 07:21

0

It can be done in CSS3, some browser might not support it! I've created an example below:

http://jsfiddle.net/swxn4/

answered Sep 06 '12 at 07:21

AZee

23
4

Stack div boxes into two columns. But when box on the right is removed, all boxes after it should line up accordingly

2 Answers2