CSS - How to prevent horizontal scrolling? - css

Question

This question probably has a simple solution.
I've designed a website with two columns side by side. Everything is fixed (menu bar and left column) with the exception of the right column.
This is intentional as I only want the right column to scroll has it will hold the readable content for the page. So everything is great, right?
Not exactly, the left column is floated left, and the right column is also floated with a larger enough left margin to allow to to sit properly in the page on load.
However when the screen is too small horizontally, the user can scroll left and right with moves the second column all around and even under my fixed first column. That is what I want to prevent.
How can I get the second column to scroll vertically but not move horizontally?
Here's a snipet of the 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;}
Thank you!

Answer 1

overflow-x:hidden
that will not allow scroll bars on an element and hide anything hanging over.

Answer 2

I hope I understood your question right way, but why do you may not need to use float.
Float is to push an element to the left or right, and I think it's very handy but for your solution you don't need it. Instead you can use on your secondary-content div position: absolute. Instead of using margins it's easier to use top, left. So if you want to have your secondary-content div in the right place you can use:
position: absolute;
top: 100px;
left: 569px;
I suggest you do the same with the other elements and use margins for creating space around your elements.