3

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!

TJ Chasteen
  • 31
  • 1
  • 1
  • 2

2 Answers2

13
overflow-x:hidden

that will not allow scroll bars on an element and hide anything hanging over.

Sam Sussman
  • 1,005
  • 8
  • 27
0

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.

Willem
  • 61
  • 2