I have this

$(document).ready(function() {
    $('.article_img').load(function() {
        var aheight = $(this).parent().height();
        var imgMargin = (aheight - 225) + 'px';
        $(this).css('margin-bottom', imgMargin);
    });
});

Unfortunately I can't show you the site as an example but I'll explain the elements. Here is an image of the problem, though.

Image

.article_img is the one and only image inside the article and it is floated left.

What this is (kind of) doing is once it's loaded, it's checking the height of the div, with the content in there, and setting the margin-bottom to be the height of the div minus 225 (the height of itself).

It works fine on the first one, and on the second one it almost works but miscalculates by a bit.

Could this be because it is running before all the elements inside of it have loaded?

I even tried $('.article *').load()

The reason for this is just to make it so the text floating around it doesn't wrap underneat it.

I could probably just put the image inside a div and set that div's height to the height of the .article div but I wanted to do it without extra html markup.

Thanks