IE7 scrollbars when position:relative item WAS out-of-screen

IE7 seems to show scrollbars when an item that has position: relative on it USED to cause a scroll-bar (e.g. it would if you took position: relative off).

<div class="box">
    <div class="inner box"></div>
</di开发者_JAVA百科v>

.box {
    position : absolute;
    top      : 5px;
    left     : 100px;
    right    : 5px;
    height   : 100px;
    border   : 1px solid #000;
}

.inner {
    right    : auto;
    position : relative;
    width    : 110%;
    left     : -90px;
}

Demo: http://jsfiddle.net/VE9ne/1/

Wondering if anyone has seen this and knows how to fix it?

Use negative margins instead of negative left

...
left:0;
margin-left:-90px; 

Add

html, body
{
overflow: hidden;
}

That's what relative positioning does, it leaves an empty space at the object's original position if you offset it. I guess IE7 is not as smart as other browsers so it will show scrollbars whereas others seem to realize there's nothing but empty space to show.

Here's what w3.org has to say about it:

[...] Offsetting a box (B1) in this way has no effect on the box (B2) that follows: B2 is given a position as if B1 were not offset and B2 is not re-positioned after B1's offset is applied. [...]

Source: http://www.w3.org/TR/CSS21/visuren.html#relative-positioning

Using margins and floats instead of relative positioning could solve your problem