Float Div To Right Of Main Content Container

HTML & CSS
1

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:

<!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>
2

It works OK doing this out to the left, but not so well to the right. Check out this recent thread on a similar topic:

3

You’d need to do something like this.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#page {
    width:900px;
    margin:auto;
    text-align:left;
    background:#000;
    color:#fff;
    padding:10px;
    position:relative;
    z-index:2;
}
#adholder {
    width: 100%;
    overflow: hidden;
    position: absolute;
    top: 10px;
    left: 0;
}
#adinner {
    width:920px;
    margin:auto;
}
.adright {
    width:160px;
    position: relative;
    margin:0;
    height:600px;
    overflow: hidden;
    background:brown;
    z-index:99;
    float:right;
    left:180px;
}
</style>
</head>
<body>
<div id="adholder">
    <div id="adinner">
        <div class="adright">Advert goes here</div>
    </div>
</div>
<div id="page">
    <h1>Centred page content goes here</h1>
    <p><a href="#">test</a></p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
</div>
</body>
</html>
4

Thanks Paul! Works great!!