JavaScript/jQuery: Offset a <DIV> based on another <DIV> height after page load

Question

Hi, I'm trying to do this:

!!! just learned I cant submit images because I'm new...

I have placed the image which perfectly describes the problem on Diino: Link to Diino folder (18,9kb) together with example files (html,css etc).

The moving DIV has this CSS:

    div.linkr-bm {
float:left;
height:1px;
overflow:visible;
position:relative;
top:68px;
z-index:2;
}

The DIV with the height value has this CSS:

.entry-tags {
 float:left;
 font-family:Calibri;
 font-size:small;
 font-weight:bold;
 line-height:1.6;
 margin:0;
 padding:0;
 width:400px;
 display:block;
}

Moving the DIV with the CSS works statically, BUT I can not get it to move with jQuery after page load using this script:

jQuery(document).ready(function(){
$('.entry').each(function(){
var height = $(this).children('.entry-tags').height();
$(this).children('.linkr-bm').css('top', height);

 }); 
});

• The DIVs iterate six times / page
• The DIVs have Classes (no #ID)
• To clarify: This is a hack because I don't have access to the DIV order and therefor have to move this DIV in place after it has been rendered. The problem is that the div with the tags can change from one to probably three rows. So that is why the offset have to be calculated.

I really appreciate any help I can get. Thank's!

Answer 1

try with this code:

jQuery(function(){ 
    jQuery('.entry').each(function(){
       $(this).find('.linkr-bm').css('top', $(this).find('.entry_tags').height() + 'px');
    });
});