Apologies for the unclear title. Check out a JsFiddle DEMO to see what I mean.
My goal is to move the black container as soon as it touches the red container. I want to prevent the overlap between the two and adjust the position of the red container relative to the black one. I believe this can be achieved with CSS using float, margin, and display adjustments, but I am struggling to do so at the moment.
Here is the code:
JavaScript
var speed =80, deg=0, center={x:50,y:50},
moveBox = function(){
var el = document.getElementById("circle"),
left = el.offsetLeft,
moveBy = 3;
deg+=moveBy;
el.style.left =center.x+Math.floor(40*Math.sin(deg/150*Math.PI))+"px";
el.style.top =center.y+Math.floor(20*Math.cos(deg/150*Math.PI))+"px";
};
var timer = setInterval(moveBox, speed);
HTML
<div id='square'></div>
<div id='circle'></div>
CSS
#circle{background:red; display:inline-block; width:80%; height:40px; position:absolute; border:1px solid #454545; margin-top:100px;}
#square{width:60px; height:50px; background:black; display:block; position:relative; position:absolute; margin-left:100px; margin-top:100px;}