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>
ralphm
April 28, 2011, 1:19pm
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:
A community for web designers and developers to discuss everything from HTML, CSS, JavaScript, PHP, to Photoshop, SEO and more.
PaulOB
April 28, 2011, 4:05pm
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>
Thanks Paul! Works great!!