Sorting divs without leaving any gaps.

Question

Is there any way I could resize my div elements without leaving gaps on the page? I think the only option is to calculate the possible generated gaps and move the elements around. Thanks in advance for any idea.

Example - (Please click on the cards in order to resize)

Answer 1

The simplest solution will be to rearrange all the cards again (not just resize the div element)

Answer 2

onclick you could change the positioning of the card's div to absolute and increase the z-index so that it is displayed above all other cards. I would suggest you create another wrapper div around each card with relative positioning to lock the boundaries in place when you switch to absolute positioning on the card.

this solution would allow all cards except the currently selected one to maintain their position.

Answer 3

I suggest you to handle on click event and as you have all you divs floated, positioning itself doesn't solve your problem. Instead, create an array of all your cards and on click event remove your selected card from there and add additional four empty divs (with the same class as your card) with which have card size. Put them onto place which is covered by your expanded card. Expanded card become absolute positioned and hide only those empty divs, while the rest of cards remain sorted and on their right places (because of floating). When you collapsing card, just remove this four divs from array and html markup.