Javascript-форум - проблема с div И animate

Всем привет, прошу сразу не судить строго, я только учусь )). Понадобилось сделать раздвижное меню, что то похожее на меню в стиле аккордион. Есть главный блок div, который находится посредине страницы, ну и собственно меню ссылки внутри него. При нажатии на ссылку, главный div изменят свою ширину с помощью функции animate и также становится посредине, и параллельно с ним должен расширятся div внутри, в котором будет контент. но почемуто div внутри не раздвигается если добавить раздвижении главного, а без него анимация с помощью функции animate работает, но не плавно.

Исходный код по возможности упростил как мог, чтобы выложить сюда.

P.S. перед этим была попытка сделать точно такое же меню, но используюя ul и li, и там ВСЕ РАБОТАЛО, но понадобилось сделать именно используя div

За ранее Спасибо всем тем кто откликнется

<div id="content">
	<div><a href="#" name="a1"><img src="img/img-main-off.png" ></a></div>
    <div id="asd"></div>
    <div><a href="#" name="a2"><img src="img/img-about-off.png" ></a></div>
    <div ></div>
    <div><a href="#" name="a3"><img src="img/img-location-off.png" ></a></div>
    <div></div>
    <div><a href="#" name="a4"><img src="img/img-about-off.png" ></a></div>
    <div></div>
    <div><a href="#" name="a5"><img src="img/img-location-off.png" ></a></div>
    <div></div>
</div>

$(document).ready(function(){
	
	var openclose = '';
	var menuname = '';
	var oldmenuname ='';
	$("#content div a").click(function(){
		if  (openclose == '') 
		{
			menuname = this.name;
			$('#content').animate({'width':'960px','margin-left':'-480px'},500);
			$('#asd').animate({'width':'659px'},500);
		}
		else
		{
		};
	});
		
});

Код:

#content{

        width:300px;

        height:460px;

        position:absolute;

        left:50%;

        top:230px;

        padding:0px;

        margin-left: -150px;}



#content div {

        float: left;

        display:inline-block;

}