Here's what I'm trying to do. I have a main content container centered in the browser screen left/right. I want to float a box to the right of the centered content container. See the code below for example.

I got this working, however a scrollbar appears when the browser is made smaller than the width of the container + the floated box. I'd only like a scrollbar to appear when the browser is made smaller than the width of the container only.

So if my centered content container is 900 pixels wide, I'd only like a scrollbar to appear when the window is less than 900 pixels, ignoring the width of the floated box to the right.

Thoughts?

Here's the code I current have:

HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
<head>
<style type="text/css">
#container {
	position:relative;
	width:900px;
	height:600px;
	margin:0 auto;
	background-color:#000;
}
#box {
	position:absolute;
	width:160px;
	height:300px;
	right:-200px;
	background-color:brown;
}
</style>
</head>
<body>

	<div id="container">
		<div id="box"></div>
	</div>

</body>
</html>