I'm trying to use javascript to give three divs a negative top position equal to their height. I've got it working, sort of (thanks to help from here!) but instead of calculating the height of each div and calculating the top position accordingly, each div is being assigned a negative top position of -367px:

<script type="text/javascript">
$(document).ready(function() {
    //Get height of footer popup
    var pHeight = $('footer ul li > ul').outerHeight(); 
    //Calculate new top position based on footer popup height
    var nHeight = pHeight + "px";         
    $('footer ul li > ul').css({ 
        //Change top position to equal height of footer popup
        'top' : "-" + nHeight    
    });
});
</script>

I've tried this using .height, .outerheight, and even .getheight which someone mentioned on the Jquery documentation for .height. I also tried using an each statement, though it didn't seem to work; I may have written it incorrectly.

In addition (if possible), I'd like the negative position to take into account the height of a content being generated using the css :after psuedo-property, though I can always manually add that in to the calculation if javascript has no way to access that.

EDIT: Added a test page link. It's the bottom divs I'm trying to target with JS, but if anyone has an idea regarding how to fix the problem with the top divs I'd be much obliged as well.

http://www.qualityprinters2.com/test/float-tab-test.html