CSS - Как предотвратить горизонтальную прокрутку?

Question

Этот вопрос, вероятно, имеет простое решение.

Я разработал сайт с двумя колонками рядом. Все исправлено (строка меню и левый столбец), за исключением правого столбца.

Это сделано намеренно, так как я хочу, чтобы прокручивался только правый столбец, если он будет содержать читаемый контент для страницы. Так что все отлично, правда?

Не совсем, левый столбец перемещается влево, а правый столбец также перемещается с достаточно большим левым полем, чтобы позволить правильно размещаться на странице при загрузке.

Однако, когда экран слишком мал по горизонтали, пользователь может прокручивать влево и вправо, перемещая второй столбец вокруг и даже под моим фиксированным первым столбцом. Это то, что я хочу предотвратить.

Как я могу заставить второй столбец прокручиваться вертикально, но не двигаться горизонтально?

Вот фрагмент кода 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;}

Спасибо!

Answer 1

overflow-x:hidden

это не позволит полосам прокрутки на элементе и скрыть что-либо висит над.

Answer 2

Надеюсь, я правильно понял ваш вопрос, но почему вам не нужно использовать float.

Float - это толкание элемента влево или вправо, и я думаю, что это очень удобно, но для решения вам оно не нужно. Вместо этого вы можете использовать в своей позиции div вторичного контента: absolute. Вместо использования полей проще использовать верхнюю часть слева. Поэтому, если вы хотите, чтобы ваш div-контент был в нужном месте, вы можете использовать:

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

Я предлагаю вам сделать то же самое с другими элементами и использовать поля для создания пространства вокруг ваших элементов.