Placing div properly outside wrapper area. FF & IE!?

Hi, I’ve been spending the las 2 days trying to figure this out.
I’m using the Benevolence theme btw.
Basically, I’m trying to place a “box” outside the wrapper area, floating on the right side of wordpress.
This is what I did, and work perfectly under Firefox.
I added this to the header.php
div id="wrapper">

<div id="masthead">

<div id="blogTitle">

<a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a>

</div>
<div><?php include (TEMPLATEPATH . '/rightbox.php'); ?></div>

</div>

<div id="insideWrapper">
———————————————
The rightbox.php for now is as simple as this
———————————————
<?php
/*
Template Name: right box
*/
?>
<div ><!--id="box-right"-->
<strong>Right box</strong>
<p align="center">content goes here and the rest right below.
<p align="left">some more stuff right here

</div>

and the css style…
#box-right {
background: #555;
position: relative;
float: right;
margin: 0px -140px 0px 0px;
padding: 0px 0px 0px 0px;
width: 120px;
}

As you see I set a -140 margin, this way the box has a gap about 10px from the right edge of the blog, above the body background, and this is how I want it, in firefox it’s great, but things change in IE.
The box is aligned with its left edge to the right side of the blog, I can’t move it a single pixel to the right past -120px.

Seem lik in IE this box is confined by the wrapper element.
Any help is greatly appreciated, even another solution to put this box on the right side.

Thanks everyone