Calculate width with jQuery

Question

Hi,

Depending on amout of <div clas="product"></div> I'm trying to set width for .productholder

 <div class="productholder">
    <div clas="product"></div>
    <div clas="product"></div>
    <div clas="product"></div>
    <div clas="product"></div>
    <div clas="product"></div>
 </div>

I can set fix width for .product if this will help.

I have tried this, but don't seems to be working:

var width = 0;
$('.product').each(function() {
    width += $(this).outerWidth( true );
});
$('.productholder').css('width', width + 250);

Thank you for your help in advance.

Answer 1

Have you tried specifying a unit?

var width = 0;
$('.product').each(function() {
    width += $(this).outerWidth( true );
});
$('.productholder').css('width', width + 250 + 'px');

By the way, <div class="productholder"> width will grow to accommodate the width of the inner <div> elements

EDIT:

Your code does work as is - Working Demo. Add /edit to the URL to see the code.

Does <div class="productholder"> have any text content? Are you specifying a height for it?

Answer 2

Will this work for you?

 var holder = $('.productholder');
 var width = holder.find('.product').length * 250;
 holder.css('width', width + "px");