Question

I create one div#sresult_container dynamically and append no of div to that div. and all appended div have different text. so i can retrieve the width of div#sresult_container but i try to that increase the width of div#sresult_container 10px before it display on the view port. how can i do this plese help me?
my code is below:

var $sresult_container = $('<div id="sresult_container"></div>');

AND after that i append the some divs as children of div#sresult_container.

and append to body.

$('body').append($sresult_container);
var Setwidth  = $('#sresult_container').outerWidth() + 10;
$('#sresult_container').css('width',Setwidth + 'px');

so here first load original width after that load the modified width. so how can do directly load the modified width.

Answer 1

First of all #sresult_container must have a pre-defined width.

#sresult_container {
    width: 100px;    
}

$('<div id="sresult_container">text</div>').appendTo('body');

$('#sresult_container').css('width', function () {
    return ($(this).outerWidth(true) + 10) + 'px';
});​

http://jsfiddle.net/xBZT7/14/

http://jsfiddle.net/xBZT7/15/