En position absolue div sur la droite, causant la barre de défilement lorsque la gauche n'a pas

Je suis en train de "flanc" centré div avec quelques éléments de conception qui sont absolument positionné en dehors de la div principale de largeur. J'ai une barre de défilement en raison de l'élément sur le droit, mais pas l'élément sur la gauche (IE6/7/8, Chrome, Firefox). Comment puis-je obtenir débarrasser de la barre de défilement horizontale?

<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>
Je ne vois pas les barres de défilement sur Chrome et Firefox sur Mac. Quel doctype utilisez-vous?
Je suis l'aide de celui-ci (ci-dessous), et je suis un PC... n'a pas le vérifier dans n'importe quel Mac versions de navigateurs. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

OriginalL'auteur Michael Snyder | 2010-02-17