Thursday, May 28

Unwanted space when stacking HTML elements in columns

Let's say you want to stack your div in columns of 3 or 4 and the number of div's can add up depending on user action. See below screenshot for example.

What we can do is provide a width to the parent div, and then all the subsequent div's, you can assign a float:left property along with a width in percentage and some padding as per your requirement.

Even though above works fine, sometimes what happens is there is an unwanted space between the div's. That is, 3 div's in a row, followed by 1 div at the extreme right and then all other div's. See below screenshot for reference.

This is a very annoying problem and I was not able to find the exact reason for it. However what solved the issue was removing the float property from the individual element and applying a display:inline-block.

Tested on all the major browsers on windows system i.e IE 10, Chrome, Firefox and Safari.

Be the first one to Comment!!!

Post a Comment