Combined width of images applied to div - not working when images have padding

Question

I need to get the combined width of the images within a div and apply that width to the div. Im using this code from here:

Take combined width of multiple images and apply to their containing div

$(document).ready(function() {
    $('div').each(function() {
        var totalImageWidth = 0;

        $("img", this).each(function () {
          totalImageWidth += $(this).width();
        });

        $(this).width(totalImageWidth);
    });
});

This works fine until I apply padding to the images. Then the containing div is too small, as the images are taking up more space.

To try and fix this I've changed "img" to the image's containing div. So this: ("img", this) becomes this: ("div-which-is-around-image", this).

For some reason the containing div is now far too wide. I've no idea why this is happening. I changed dom ready to window load incase the issue was the images not being loaded in time, but it makes no difference.

Thanks

Please add the HTML and CSS code you are talking about. Do you apply the padding to the images or to the DIVs that contain the images? — slosd, Feb 08 '11 at 11:25
It seems OK. Can you post the code you apply padding or more? — Oralet, Feb 08 '11 at 11:26

score 0 · Answer 1 · answered Feb 08 '11 at 11:25

You can use the innerWidth() method instead of width() wich return the widht including padding (excluding border and margin) Your code should look like this:

$(document).ready(function() {
    $('div').each(function() {
        var totalImageWidth = 0;

        $("img", this).each(function () {
          totalImageWidth += $(this).innerWidth();
        });

        $(this).width(totalImageWidth);
    });
});

score 0 · Accepted Answer · answered Feb 08 '11 at 11:44

0

Oops, I was floating the image left but not its div. Floating them both has fixed this. Thanks

answered Feb 08 '11 at 11:44

Evanss

23,390
94
282
505

Combined width of images applied to div - not working when images have padding

2 Answers2