So I have a couple of <span> elements that are being generated dynamically. The thing is that I need to know their width together. I tried to wrap them with <div> and made alert($("#spanWrap").width()); but it gave width of container instead of <span> elements.

I think I can try to explain it best by jsFiddl'n it here: /

So I have a couple of <span> elements that are being generated dynamically. The thing is that I need to know their width together. I tried to wrap them with <div> and made alert($("#spanWrap").width()); but it gave width of container instead of <span> elements.

I think I can try to explain it best by jsFiddl'n it here: http://jsfiddle/XGynv/7/

• javascript
• jquery
• html
• css

• Divs will, by default, expand to take the width of their container. If you need them to shrink to the width of their contents one option is to make them float. jsfiddle/M4hWu/2 – DanC Commented Jul 21, 2011 at 19:11

8 Answers 8

add display: inline-block; to the style of your div wrapping the spans.

edit:

with the spans wrapped in a div as in

<div id="spanwrapper">
   <span>span1</span>
   <span>span2</span>
</div>

the css style should contain (in this order, see ments by gilly3):

#spanwrapper {
   display: inline-block;     // the div shrinks to fit around the content
}

#spanwrapper {
   *display: inline;          // adding support for IE7 or lower
}

so that you get the width using jquery:

$("#spanwrapper").width();

or using conventional javascript:

document.getElementById('spanwrapper').clientWidth;

note that with the size defined by the browser, it now does not make sense to define a fixed width in the style.

There is no way you can do it unless you write your own code to add up width of each span like below.

var w = 0;
$("#divMenuSpan span").each(function(){
  w += $(this).width();
});

//Now w will have the bined width of all the spans inside divMenuSpan

It's an obvious answer but you could just do -

parseInt($("#fashion").width()) + parseInt($("#wedding").width())

Might be easier if you just changed that container to a span instead of a div

<span id="divMenuSpan">

http://jsfiddle/XGynv/8/

I updated your jsFiddle.

Basically I am looping through the spans and summing the widths.

That is because a div is a block element and block elements always fill the width of their container. To make a div fit the width of its contents, float it:

http://jsfiddle/XGynv/12/

#wrap
{
    width: 666px;
    overflow: hidden;
}
#divMenuSpan
{
    float: left;
}

Edit: I should point out that if your spans wrap, the width of the floated container div will shrink using this technique. If you want the actual width of the spans, you'd have to iterate the divs in a loop and add up the sum of their widths.

Something like

var size = 0;
$('span.someclass').each(function(el) { size += $(el).width(); });

?

You can write javascript codes to calculate it.

$(document).ready(function() {
    var spans = $("span"),   //span collection
        width = 0; 
    spans.each(function(index,ele){
        width = width + $(ele).outerWidth(true); //here, it will include margin.
    });
    console.log(width);
});​