Fixed positioning with spacer

I am using jQuery to set an ad unit when the user scrolls to the target div. However, I have a setup where I need a fixed element to move 20px to the left. I have a div that wraps it in words to the right: 20px; but this seems to be canceled as soon as jquery adds the fixed position class. I only have where the fixed position is top 10px. I don't want this to fix left or right because I want it to be blocked.

The weird thing is that wrap div with padding works fine for me in firefox even with fixed positioning. However, in Chrome, the spacer is ignored and the block is offset by 20 pixels. How can I fix this element at the top of the page and "lock" it in place of the x-axis? Can I use two different positioning styles? (Fixed and absolute?)

Edit:

Here is the jQuery I'm using:

;(function($){
$(window).scroll(function() {
var styledDiv = $('#styledDiv'),
    targetScroll = $('#float').position().top,
    currentScroll = $('html').scrollTop() || $('body').scrollTop();

styledDiv.toggleClass('fixedPos', currentScroll >= targetScroll);
});

})(jQuery);

      

        
        
        
      

    

and i tried to wrap the styledDiv with a div i called "adside" with this css:

#adside {padding-right:20px;}

      

        
        
        
      

    

Here is the html:

<div id="float"></div>
<script src="http://takemydough.com/wp-content/themes/iloveit/js/smartbanner.js"      type="text/javascript"></script>
<div id="adside">
<div id="styledDiv">
AD CODE
</div>
</div>
</div>