title: An algorithm to space out overlapping rectangles?
body: <p>This problem actually deals with roll-overs, I'll just generalized below as such:</p>
  
  <p>I have a 2D view, and I have a number of rectangles within an area on the screen. How do I spread out those boxes such that they don't overlap each other, but only adjust them with minimal moving? </p>
  
  <p>The rectangles' positions are dynamic and dependent on user's input, so their positions could be anywhere. </p>
  
  <p>Attached<img src="https://i.stack.imgur.com/3LVLK.jpg" alt="alt text"> images show the problem and desired solution</p>
  
  <p>The real life problem deals with rollovers, actually.</p>
  
  <p>Answers to the questions in the comments</p>
  
  <ol>
  <li><p>Size of rectangles is not fixed, and is dependent on the length of the text in the rollover</p></li>
  <li><p>About screen size, right now I think it's better to assume that the size of the screen is enough for the rectangles. If there is too many rectangles and the algo produces no solution, then I just have to tweak the content.</p></li>
  <li><p>The requirement to 'move minimally' is more for asethetics than an absolute engineering requirement. One could space out two rectangles by adding a vast distance between them, but it won't look good as part of the GUI. The idea is to get the rollover/rectangle as close as to its source (which I will then connect to the source with a black line). So either 'moving just one for x' or 'moving both for half x' is fine.</p></li>
  </ol>