Absolutely positioned div on right causing scrollbar when the left doesn't

15
votes

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>
11
htmlcsscss-position
I see no scrollbars on Chrome and Firefox on the Mac. What doctype are you using? – Daniel Vassallo
I'm using this one (below), and I'm a PC... didn't check this in any Mac versions of browsers. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> – Michael Snyder

11 Answers

15
votes

This works in IE6-9, FF3.6, Safari 5, and Chrome 5. Didn't seem to matter what doctype I threw at it(none, xhtml 1 transitional, html5). Hope this helps, that was an interesting problem.

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html,
body { 
    margin: 0;
    padding: 0;
    text-align: center;
}

body {
    overflow: auto;
}
#container {
    min-width: 960px;
    zoom: 1; /*For ie6*/
    position: relative; /*For ie6/7*/
    overflow: hidden;
    margin: 0 auto;
}

#main {
    background: #cea;
    width: 960px;
    margin: 0 auto;
    height: 700px;
    position: relative;
    top: 0;
}

#right,
#left {
    position: absolute;
    height: 100px;
    width: 100px;
    top: 0;
    z-index: 100;
}

#right { 
    background: #797;
    right: -100px;
}

#left {
    background: #590;
    left: -100px;
}      
</style>
</head>
<body>
    <div id="container">
        <div id="main">
            <div id="left">left</div>
            <div id="right">right</div>
        </div>
    </div>
</body>
</html>
5
votes

Throwing an overflow-x: hidden on the body tag would work in anything that's not IE6/7... but for those two browsers, you'll need to also add overflow-x: hidden to the html tag.

So use what you have now with this adjustment:

html, body { 
        height: 100%; 
        width: 100%;
        margin: 0;
        *overflow-x: hidden;
    }

body { text-align: center; overflow-x: hidden; }

Note that the reason the "*" hack is used in the html, body declaration is because IE8 is unconventional. If you don't use it, IE8 will lose vertical scrollbars as well, not just horizontal. I don't know why. But that solution should be fine.

1
votes

I was having a similar issue to this and was completely tearing my hair out as I found the solution above didn't quite work for me. I overcome this by creating a div outside of my main container div and using min-width and max-width to come up with a solution.

#boxescontainer {
    position: relative;
    max-width: 1100px;
    min-width: 980px;
}   

    #boxes {    
        max-width: 1100px;
        min-width: 900px;
        height: 142px;
        background:url(../grfx/square.png) no-repeat;
        background-position: center;
        z-index: 100;
    }

I found however that I also needed to make the square.png image the size of the div so I made it as a transparent png at 1100px. This was my solution to the problem and hopefully it might help someone else.

On a side note I also had an image on the left side in which I used absolute positioning which didn't have the same scrollbar issue as the right side. Apparently the right and left side do take on different properties from what research I did regarding this matter.

In regards to people using overflow-x:hidden I would have to disagree with this method mainly because you are taking away the users ability to horizontal scroll completely. If your website is designed to be viewed the a 1024px resolution then people who are on an 800px resolution won't be able to see half of your website if you take away the ability to horizontally scroll.

0
votes

Your body is not set to relative.

0
votes

Not knowing what you'd like to do with this, I would perhaps set a background image on the body instead.

0
votes

You're getting a scrollbar only when the viewport's thinner than the main plus that right box, right? (Don't think that was clear to some people.) This is expected browser behavior for content overflow.

Depending on what you want to happen (why do you want it to disappear in this circumstance, if you do?), you could set overflow:hidden on .wrapper. That would always hide it--if you're looking to dynamically display it on some other event, that'll work.

If I'm not mistaken, though, you just don't want it to show when their viewport's only 960px wide. AFAIR you can't do that without some js/jQuery. My suggestion would actually be--especially if you don't want to mess with javascript--if you want this content to be visible at all, accept the scrollbar at narrow widths. It might irk you as a designer, but most people won't notice it, and those who do can still access your content--which is a win, right?

0
votes

Wrap all the elements in a div, make that div position relative and overflow hidden. It solves this problem every time. :D

0
votes

If the page language is left-to-right, then the left non-fitting elements don't cause a scrollbar.

Try this:

<html dir="rtl">...</html>

This will change the text direction of the page to Right-To-Left, and now the left div will cause a scrollbar, not the right one.

You can do the same with direction:rtl css property.

If you want your page render to be independent from text direction then you can arrange page elements differently to avoid this.

0
votes

Old question I know, but may help someone else out. The below expands on James response but works in IE6/7/8/9, FF and Webkit. Yes it uses evil expressions but you can put that in a IE6 specific stylesheet.

#bodyInner {
       width: 100%;
       min-width: 960px;
       overflow: hidden;       
       width:expression(((document.compatMode && document.compatMode=='CSS1Compat') ? document.documentElement.clientWidth : document.body.clientWidth) > 980 ? "100%" : (((document.compatMode && document.compatMode=='CSS1Compat') ? document.documentElement.clientWidth : document.body.clientWidth) #LT# 980 ? "960px" : "97.5%"));
}
0
votes

I needed a solution like this too - thanks to all who suggested the 100%-wide wrapper with overlow-x hidden. However, I don't think you have to add the extra #bodyInner div - I've successfully tested it applying the width and overflow attributes directly to body in Safari, Opera, Firefox, Chrome, and IE8.

0
votes

I have a solution that doesn't work in IE7/IE6, but seems to be fine everywhere else.

Create wrapper (#bodyInner) around everything inside your <body> tag.

Apply this CSS rule:

#bodyInner {
    width:100%;
    overflow:hidden;
    min-width:960px;
    }

Too bad you can't just apply this on the <body> element.