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!

1
  • 1
    Can you create a jsFiddle or add your HTML to your question?
    – j08691
    Nov 13, 2012 at 20:40

2 Answers 2

13
overflow-x:hidden

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

1
  • 4
    Using this approach still allows for horizontal scrolling on mobile devices tho
    – EHerman
    Apr 11, 2014 at 16:32
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.