jQuery - set div width to sum of it's children

Question

Hello,

I have following setup:

html:

<div id="holder">
  <div>
    <img/>
    <img/>
  </div>
</div>

css

#holder { width: 800px; }

now, i want to make jQuery gallery and will move line of images to the left and right with negative margin-left of inner div.

However, I have to tell <img/>s to float to left and set inner div's width to sum of widths of images.

How can I do this some clean and nice way?

thank you

Answer 1

var sum=0;
$('#holder img').each( function(){ sum += $(this).width(); });
$('#holder > div').width( sum );

//alert(sum);

this should do the trick ..

The float to the images, you can apply it with css

#holder img{float:left;}

Answer 2

Anyone knows why doing that way gives me a NaN on the one extra element after all the images being iterated?