Question

this is my page: http://jsfiddle.net/5RKnQ/. If you hover over the avatar image, you will visualize something like this:

On jsfiddle, width seems to be broken, on my browser works correctly. Anyway i would like to arrange those blue spans inside the box in the best way possible, adapting the outer div to their width and saving as much space as possible.

Answer 1

I can’t seem to update your jsfiddle, jsfiddle’s been kind of a mess today, even though I was able to use it to write this code.

(edit – works after logging in): http://jsfiddle.net/HQ6Py/

I am not sure if there’s a CSS way to do what you want, but here is some script that seems to work. Basically, you check the actual rightmost position of each span and keep track of the largest one, then set the width based on that.

Note that the maximum size of the div was being constrained by “max-width:28%” which is what was messing it up in JSFiddle – remove that from your styles and replace with an absolute pixel value.

 $(".username").hoverIntent({
    over: function(e) {
        var minLeft, maxWidth = 0,
            list = $(this).find(".title_list");

        // start the fadeIn first otherwise the positions won't be available
        list.fadeIn(300);

        list.find('span').each(function() {
            var left = $(this).position().left,
                width = $(this).outerWidth() + left;

            if (maxWidth < width) {
                maxWidth = width;
            }
        });
        list.css("width", maxWidth);

    },
    out: function(e) {
        $(this).find(".title_list").fadeOut(300);
    },
    timeout: 3000
});