Add a div below inline-block wrapped row

Question

I have a list of inline-block elements that wrap to form several rows. I\'d like to display a div element between on of the rows, depending on where a specific element is lo

Answer 1

Here's a different alternative:

http://jsfiddle.net/SYJaj/7/

There is no need to have the "banner" be absolutely positioned. Just give it display:inline-block; like everything else, and calculate which block it needs to follow with the offset method in jQuery.

The key is in this code:

function placeAfter($block) {
    $block.after($('#content'));
}

$('.wrapblock').click(function() {
    $('#content').css('display','inline-block');
    var top = $(this).offset().top;
    var $blocks = $(this).nextAll('.wrapblock');
    if ($blocks.length == 0) {
        placeAfter($(this));
        return false;
    }
    $blocks.each(function(i, j) {
        if($(this).offset().top != top) {
            placeAfter($(this).prev('.wrapblock'));
            return false;
        } else if ((i + 1) == $blocks.length) {
            placeAfter($(this));
            return false;
        }
    });
});

EDIT: Changed the stylesheet to look like yours.