Div size to be the same as the parent

Div size to be the same as the parent

Hi
 
I have a div, called reccontainer, this has several divs of class rec in, basically a tile type selector for records.
 
I wish to have the onclick of any clicks on class rec to animate the div to fill the reccontainer.
 
I have tried this so far, everything works apart from xNewSize, it seems to move the div when i change the size
  
  1. $(".rec").click(                 function ()                 {                     xShift = $(this).position().left - $("#reccontainer").position().left;                     yShift = $(this).position().top - $("#reccontainer").position().top;                     xNewSize = $("#reccontainer").width()-parseInt($(this).css("margin-left"));                     yNewSize = $("#reccontainer").height()-parseInt($(this).css("margin-top"));                     alert(yNewSize +" " +xNewSize);                     $(this).animate(                         {                             top: "+=" + yShift,                             left: "-=" + xShift,                             height: yNewSize,                             width:xNewSize                         });                     alert("Got Here");                 }                 );
 
Can anyone advise
 
Thanks.