I am encountering a problem with sizing.
Desired Outcome:
My goal is to use resizable and draggable functionality along with JavaScript code to position elements on the screen by setting their top, left, height, and width. I aim to resize an element until it touches another element without any gap between them.
The Issue with Sizing:
While resizing an element, it stops correctly when it collides with another element. However, occasionally a small gap appears between the elements (usually less than a pixel wide).
When calculating the position of the elements based on percentages, everything seems in order initially. For example, if the top of element 1 is set at 10% and its height at 10%, then the top of element 2 should be at 20%. But upon calculating the pixel values, discrepancies arise:
Element1.offset().top + Element1.height() != Element2.offset().top
Illustration of the Problem with Screenshots:
I am puzzled as to why the percentage values do not correspond to the pixel values. Below is an example with attached images to highlight this issue.
Element 1 (above element):
Top + Height = Bottom
13.64% + 13.68% = 27.32%
Element 1's top and height in percentages
Element 2 (below element):
Top = 27.32%
Element 2's top in percentages
Although the sum of top and height in percentages for element 1 matches the top of element 2, there is a discrepancy when comparing these values in pixels:
Element1.offset().top + Element1.height() = 175.5875015258789px
Element2.offset().top = 175.60000610351562px
Comparison of pixel values for Element 1 and Element 2
Why does Element1.offset().top + Element1.height() not equal Element2.offset().top despite having the same percentage values?