CSS - Comment empêcher le défilement horizontal?

Cette question a probablement une solution simple.

J'ai conçu un site web avec deux colonnes côte à côte. Tout est fixe (barre de menu et de la colonne de gauche), à l'exception de la colonne de droite.

C'est intentionnel, car je ne veux la colonne de droite pour faire défiler a elle tiendra l'lisible le contenu de la page. Donc tout ce qui est grand, à droite?

Pas exactement, la colonne de gauche est flottant à gauche, et la colonne de droite est également effectué avec plus de suffisamment de marge de gauche permettent de s'asseoir correctement dans la page de chargement.

Toutefois, lorsque l'écran est trop petit à l'horizontale, l'utilisateur peut faire défiler à gauche et à droite avec des mouvements de la deuxième colonne tout autour et même sous mon fixe de la première colonne. C'est ce que je veux éviter.

Comment puis-je obtenir la deuxième colonne pour faire défiler verticalement mais pas déplacer horizontalement?

Voici un snipet de la css:

#main-content {float: left; margin: 100px 0 0 0; background: rgba(128,127,128,0.9); padding: 15px 25px 15px 15px; width: 500px; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px;}
#button-glue {float: left; position: fixed; padding: 0 25px 15px 0px; width: 525px;}
#button{
    float:right; margin: 5px -20px 0 0;
}
#button a {
    background:url(../images/button.png) 
    no-repeat;
    display:block; /* Necessary, since A is not a block element */
    width: 167px;
    height: 58px; 
}
#button a:hover {
    background:url(../images/buttonhover.png) no-repeat;
    width:167px;
    height:58px;
}
.right {float:right; margin: 0 0 5px 25px;}
#secondary-content {float: right; margin: 100px 0 15px 569px; background: rgba(128,127,128,0.9); padding: 20px; background: rgba(128,127,128,0.9); width:405px; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px;}

Merci!

Pouvez-vous créer un jsFiddle ou ajouter votre code HTML à votre question?

OriginalL'auteur TJ Chasteen | 2012-11-13

  1. 12
    overflow-x:hidden

    qui ne permettra pas aux barres de défilement sur un élément et de cacher quoi que ce soit suspendue au-dessus.

    L'utilisation de cette approche permet toujours de défilement horizontal sur des appareils mobiles tho

    OriginalL'auteur Sam Sussman

  2. 0

    J'espère que j'ai bien compris votre question le droit chemin, mais pourquoi vous ne pouvez pas besoin d'utiliser des float.

    Flotteur est de pousser un élément à gauche ou à droite, et je pense que c'est très pratique, mais pour votre solution, vous n'en avez pas besoin. Au lieu de cela vous pouvez utiliser sur votre secondaire-le contenu de la div en position: absolute. Au lieu d'utiliser les marges c'est plus facile à utiliser en haut, à gauche. Donc, si vous voulez avoir votre secondaire-div du contenu au bon endroit, vous pouvez utiliser:

    position: absolute;
top: 100px;
left: 569px;

    Je vous suggère de faire de même avec les autres éléments et l'utilisation des marges pour la création de l'espace autour de vos éléments.

    OriginalL'auteur Willem