jquery animation margin keep increasing

again div1 left Increase and won't go to its default value. when I try it on FF it doesn't give 25% of left and right, But when I try it on IE it works perfectly fine.

Does anybody have an idea with this?

<p>Click to slide</p>
<div id="container"style="height: 50%; width: 50%; background: #001122; position: relative; margin: 0;">		
<div id='div0' style="removed:absolute ;background: #fff333; height:70%; width:50%; margin-removed25%;">
	<span>Test</span>
</div>

<div id = 'div1' style="background: #003344; height: 70%; width: 25%;padding:0px; removed0%;" >
<h1>This will slide to the left</h1>
</div>		

<div id = 'div2' style="background: #003344; height: 70%; width: 25%;padding:0px; removed0%; removed:absolute;" >
    <h1>This will slide to the Right</h1>
    </div>		
</div>

window.onload = function()
{
	
	$(document).ready(function()
	{
		$("p").click(function()
		{	

    			if($('#container').is(':visible'))
    			{
    				$('#div1').animate({'left':'+=25%'},1000);
    				$('#div2').animate({'right':'+=25%'},1000,function()
    				{
    					$('#container').fadeOut(1000);
    				});
    			}else
    			{
    				$('#container').fadeIn(1000,function()
    				{
    					$('#div1').animate({'left':'-=25%'},1000);
    					$('#div2').animate({'right':'-=25%'},1000);
    				});					
    			}
            })
	});
}