How do I make two rectangles move out of eachother?

Question

Let's say I have two rectangles overlapping each other like this...

And I want them to end up like this...

How would I calculate the position I need to add so that the rectangles move out of each other?

Note: I did find this question but it doesn't tell me how to actually move the rectangles.

Everyone's assuming I want to move the rectangle downwards, but I actually want the rectangle to move in the direction which would be the most logical. So that if the rectangle is completely to the right of the first rectangle and moves 1 pixel to the left, that it instead of moving downwards, it would move to the right.

Answer 1

Just move first rectangle any direction from second rectangle.

Answer 2

In the exact configuration you have shown:

where a = is the foreground rectangle and b = the background triangle.

a.Top = b.Bottom; // Add +1 to have it just past the bottom.

Answer 3

rectangle2.top = rectangle1.bottom+1 (javascript)

Answer 4

even easier:

set the Y coördinates of the first rectangle's bottom, to the y coördinates of the second rectangle's top

Answer 5

__________
|    ____|____
| A |    |    |
|___|____|    |
    |      B  |
    |_________|

if [ 
     (TopLeftOfA.Y + A.Height - TopLeftOfB.Y)
     < 
     (TopLeftOfA.X + A.Width  - TopLeftOfB.X)
   ]
    TopLeftOfB.Y = TopLeftOfA.Y + A.Height
else 
    TopLeftOfB.X = TopLeftOfA.X + A.Width