title: How to position absolute elements and take care of case of overflow of the element (without scroller)
body: <p>I have this calendar I'm making, I positioned the elements with absolute position within the rows, like this:</p>
  <p><a href="https://i.stack.imgur.com/C9pKQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/C9pKQ.png" alt="calendar with elements" /></a></p>
  <p>every element is positioned with absolute position so it is not part of the flow, so the problem is, if I have an element that the text within is too long, the element will slip down and cover/will be covered by another element, like this:</p>
  <p><a href="https://i.stack.imgur.com/QUS0g.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QUS0g.png" alt="calendar with long element that is slipping" /></a></p>
  <p>Now idealy i want the element that is covering the long elment to go down. But because the long element is positioned with absolute position and not relative he can't push the element down (I don't want to use scroll here on the long element, I want to see the whole text).</p>
  <p>And I also can't use position relative because then I will not be able to position the elements right on the X axis, because they will push other elements to the left by their width. and i don't want that because the position is calculated by the days the event accured on.</p>
  <p>Basically I need absolute position on the X Axis, and relative on the Y Axis.</p>
  <p>Any ideas on how to solve this issue will be appretiated. (maybe a library the can do the thing above ^)</p>
  <p>edit: also can't use grid since i want to support old browsers.</p>