Question

I’m a noob so this is probably basic stuff, but I have tried to solve this by searching the web without any luck. Any help is much appreciated!

What I need to do is: To move a floating down X px after the page has been rendered, where X is the height of another . I have tested the CSS manually, adding X px to the “Top:” property and it works fine, the problem is doing it to six instances after the page has been rendered.

(the reason I need to do this is that I have no control over the output that comes from a database, otherwise I would have rearranged the order to

The solution can make use of JavaScript and/or jQuery, even mootools is loaded according to the initial script statements.

I included code from the last div with an ID selector, I dont know if this is relevant, I just got the feeling it was after surfing the web for two days.

Many thanks!

<div id="blogwrap1"> <--! Wraps all blog entries for one page-->

    <div class="blogwrap2"> <--! Same as above, just a second wrap-->

<–! ======================This section i repeated 6 times ======================–>

        <div class="entry"> <--! Wraps 1 blog entry-->

            <div class="entry-title"></div>

            <div class="entry-body">

                <div class="links"></div> <--! Here I need to add HEIGHT from "entry-tags" to TOP property -->

            </div>

            <div class="entry-footer">

                <div class="entry-footer-line">

                    <div class="entry-tags"></div> <--! Get HEIGHT property -->

                </div>
            </div>
        </div>
    </div>
</div>

<–! ======================================================================–>

UPPDATE !

I have put a package here with html/CSS etc for testing.

move_div.zip
(64,5kb)

One thing I probably was not clear about is that the height of the “entry-tags” should be added to the “top” property of the “links” class (it should not replace the value). What I’m trying to do is to float the div relatively at the same position when the “entry-tags” changes it height depending on how many tags/rows of tags is entered. Hope that made sense.
Thanks!

Answer 1

I solved this with help of previous answers. They didn’t work out of the box, but pointed me in the right direction. Thank you very much! The following code now work as intended:

jQuery.noConflict();
jQuery(document).ready(function(){
    jQuery(function(){ 
        jQuery('.entry').each(function(){
        var extra = jQuery(this).find('.entry-tags').height();
        var total = 44 + extra;
        jQuery(this).find('.linkr-bm').css('top', total + 'px');
        }); 
    });
});