Question

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.net/XGynv/7/

Answer 1

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 comments 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.