Here is the scenario I have a div element which which acts like container to other elements in my page
<div class="container"> <div style=" left: 251px; top: 150px; position: absolute; width: 410px; height: 301px;" id="clonediv1" class="cmenu1 ui-draggable dragged ui-resizable"> </div> </div> Now in a javascrpt method i do this // Cloning the above container var htmlClone = $("#container").clone(); // Trying to see if it is cloned alert("<html><head></head><body>"+htmlClone.html()+"</body></html>"); // Trying to iterate over all children and then decrement their height with some predefined height htmlClone.children().each(function(i,v) { var theTag = v.tagName; console.log("tag Name:"+theTag); var topPix = $(this).offset().top; // Current distance dragged element has traveled vertically var leftPix = $(this).offset().left; // Current distance dragged element has traveled horizontally // <<<<Problem Here>>> I always get top and left as 0 and 0 alert($(this).html()); console.log("top & Left:"+topPix+" "+leftPix); console.log("componentBarHeight : "+componentBarHeight); // Try to reduce top value here $(this).css({"left":leftPix,"top":topPix-componentBarHeight}); }); // Try ti check final HTML. Final HTML is bad because my top and left are always zero alert("<html><head></head><body>"+htmlClone.html()+"</body></html>"); Am i doing any mistake???