Correct way to set html div position when inserting html via ajax

I am dynamically building html in javascript. This will then be inserted into an element. What is the correct way to set the top, left, width and height properties within the html that I am creating. My current technique works in IE, but not Chrome or Safari. This is how I'm currently doing it (controlgroup is an object containing my properties):

html += '<div id="开发者_StackOverflow社区' + controlgroup.id + '" class="controlgroup ui-widget-content"';
html += ' style="{';
html += 'top:' + controlgroup.top + '; left:' + controlgroup.left + ';';
html += 'width:' + controlgroup.width + '; height:' + controlgroup.height + ';';
html += '}">';
html += 'cg:' + controlgroup.id + ' ' + controlgroup.left + ',' + controlgroup.top;
html += '</div>';

I then do this:

$('#formcontainer').html(html);

I need the ability to specify exact coordinates, so I can't use 'predefined' css classes here. Thanks very much.

1) You'll want to make that you are using left, right, height, and width values that have px attached. So instead of setting width:50; set it to width:50px;.

2) You'll want to add position:relative; to your style.

3) The {} brackets are not needed

Working Demo: http://jsfiddle.net/Jaybles/6fbvT/2/