Fixed Width Centred Div Scrolling issue

[URL=”http://www.neoterik.com.au/testing_barossaearth/test.htm”]Example Here[/URL]

If I have a fixed width .panel div inside a full width .wrap div, styled like so

[code]
.wrap {
width: 100%; overflow: visible;
}
.panel {
width: 780px; height: 100%; overflow: visible; position: relative;
margin: 0 auto 0 auto;
}
[/code]

Then inside the .panel div i place another element (another div for arguments sake) like so

[code]
<div class=”wrap”>
<div class=”panel”>

<div class=”test”>test</div>

</div>
</div>
[/code]

and style it like so

[code]
.test {
width: 200px; height: 200px;
background-color: red;
position: absolute;
top: 0px; left: -100px;
}
[/code]

it behaves as expected, the .test div half ‘hangs out’ of the parent .wrap, but if i scale the browser window below 780px, horizontal scrollbars appear that allow you to scroll only to the left edge of the .wrap div

this is the behaviour i want.

but! if i use “right: -100px;” instead, to ‘hang’ .test outside of .wrap on the right side, for some reason, IE6, IE7 and FFox all create horizontal scrollbars that allow me to scroll to the extremities of .test, and not just to the right edge of .wrap…

why is this? and how do i stop it? i want to see the part of .test that is sticking out, but only if the browser window is wider than .wrap’s width…if the browser window is smaller, i only want the horizontal scrollbar to allow for scrolling across the width of .wrap

i find it strange that it behaves how i want on the left side, but not on the right side.

anyone have any advice/info?

Also in #CSS _↴