Position element relative to another doesn't work

Question

I am trying to position my element with class name "adsense" over the half height of element with class name "publish-info" but it doesn't work. I should mention that I can't edit the html source of my template. I've tried this code:

.publish-info {
    height: 150px!important;
    position: relative!important;
}

.adsense {
    top: 50px!important;
    position: absolute!important;
}

...and javascript:

<script type='text/javascript'>
    //<![CDATA[ 
    window.onload = function () {
        $('.publish-info').append($('.adsense'));
    } //]]>
</script>

But this doesn't work. Here's my site: http://www.musicep.com/2013/07/bt-aqualung-surrounded.html

Answer 1

Your script and styles are doing roughly what they should do, but the problem is that the javascript function that places the .adsense element inside your .publish-info runs before the adsense div is available.

Since you're using jQuery anyway, I'd suggest changing the window.onload to:

$(document).ready(function(){
    $('.publish-info').append($('.adsense'));
});

See if that helps.