Question:
Good afternoon, I'm creating a layout with height:100% where I have 2 groups, and inside each group I align the DIV s vertically and if any DIV does not fit the maximum height or there is page resize , it goes to another column, as in example:
https://jsfiddle.net/ErickV/xqkujqv8/
Notice that the 2nd group is overlapping the 2nd column in front of the 1st group. I would like the 2nd group to start after (right) the last column of the 1st group. Is something wrong or could be adjusted in the CSS ?
I made some 'technical adjustments' via JavaScript taking the distance of the last div contained in the 1st group and set a left in the 2nd group, and if there was a 3rd group, I would repeat this process between the 2nd and 3rd and so on. I found a lot of workaround .
Answer:
ErickV , I did some testing using the code you provided and I only managed to set a value for the width of group 1, in short, when the second column of group 1 is created the width does not adjust to the new items, and so group 2 overwrites the newly created column.
I believe that instead of adjusting the left of group 2, you can set a new value for the width of group 1.
To explain it more clearly, Set the value of 250px to the group a direct in css to the width property.
#group1 {width:250px;}
I used the ID so that only group 1 has this new width, however, I believe that this form is only interesting when you can identify the number of columns that a group has.
So you will be able to do the calculation and set a new value for width through the .css() of jquery.
NOTE: the value of 250 would be the calculation (122+3)*2 = 250. 122px of width + 3 of margin, times the amount of column, in this case two!