Absolutely positioned div on right causing scrollbar when the left doesn't
Posted
by Michael Snyder
on Stack Overflow
See other posts from Stack Overflow
or by Michael Snyder
Published on 2010-02-17T21:34:25Z
Indexed on
2010/04/16
2:33 UTC
Read the original article
Hit count: 311
I'm trying to "flank" a centered div with some design elements that are absolutely positioned outside the main div's width. I'm getting a scroll bar due to the element on the right, but not the element on the left (IE6/7/8, Chrome, Firefox). How can I get rid of that horizontal scrollbar?
<html>
<head>
<style type="text/css">
html, body {
height: 100%;
width: 100%;
margin: 0;
}
body { text-align: center; }
.wrapper {
margin: 0 auto;
position: relative;
width: 960px;
z-index: 0;
}
.main {
background: #900;
height: 700px;
}
.right, .left {
position: absolute;
height: 100px;
width: 100px;
}
.right {
background: #090;
top: 0px;
left: 960px;
z-index: 1;
}
.left {
background: #009;
top: 0px;
left: -100px;
z-index: 1;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
© Stack Overflow or respective owner
