ansaurus

Question

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

Answer 1

A:

Your body is not set to relative.

Louis Stephens 2010-02-18 04:56:50

Nope.. I still have the issue.

Michael Snyder 2010-02-22 21:52:16

Answer 2

A:

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

marty3d 2010-03-01 09:58:47

Appreciated, and I might have to go that route; I've just been trying to avoid it.

Michael Snyder 2010-03-01 14:13:47

If you're not displaying anything that is going to be interacted with, there's certainly nothing *wrong* with going that route.

D_N 2010-03-01 14:35:00

The background image (centered) is the best option, assuming you wouldn't have content on the left and right (since not knowing if they will be hidden). The background will image will contain the left and right colors/imagery only and be longer than the targeted monitor widths.

Brandon 2010-07-05 12:47:33

Answer 3

A:

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?

D_N 2010-03-01 10:19:06

Are you saying the expected behavior for content overflow only causes a scrollbar for overflowing content on the right side? Because that's what's happening here.The problem is the scrollbar is only caused by the box on the right; the box on the left SHOULD cause the same problem, but it doesn't. So it follows that either the left is treated different than the right, or there's a way to have the right side not affect the horizontal width.Unfortunately, the powers that be regard the scrollbar as a flaw (as do I). Wish I could just ignore it.

Michael Snyder 2010-03-01 14:12:11

I don't know what the spec has to say about this, but from experience, top and left overflows are treated differently. It's why we can hide unwanted elements with left:-99999em and top:-999em and such. If you want to solve this, I'd suggest using some javascript.

D_N 2010-03-01 14:30:36

(Or using a background image.)

D_N 2010-03-01 14:35:58

If jQuery's an option for you, let me know and I can give you a solution.

D_N 2010-03-01 14:36:26

Also, you *can* set overflow:hidden on the body element, but it's a very bad idea. People really do browse with smaller windows, and it would cut off your main content at those widths.

D_N 2010-03-01 14:37:51

jquery's definitely an option; I welcome javascript solutions :)

Michael Snyder 2010-03-11 16:47:52

Answer 4

A:

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 but hey whatever

James 2010-04-16 02:30:48

Answer 5

+1 A:

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 a little retarded. 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.

RussellUresti 2010-04-16 03:53:09

Just FYI, relying on browser bugs is typically a bad idea. IE supports browser-detection that won't net you false positives or break if it ends up patched. While it's physically painful to do this for single CSS lines, still, take a look at http://www.quirksmode.org/css/condcom.html

pinkgothic 2010-04-23 07:55:21

Answer 6

A:

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

Nic Bell 2010-06-23 21:10:13

Answer 7

+3 A:

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>

joelpittet 2010-07-18 00:53:25

Answer 8

A:

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.

Gorkem Pacaci 2010-07-19 22:28:35

Answer 9

A:

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%"));
}

Kirk Bentley 2010-10-26 05:15:48

ansaurus

tags:

views:

answers:

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

related questions