Remove horizontal scrollbar in CSS

Question

I use the facebook button as on my web page. I need it to align on the right side of the page. But there is a horizontal scrollbar.

See the script http://jsfiddle.net/u4kMs/

I could not find out what causes this. How to fix it?

Answer 1

A scroll bar is displayed because the content is too large for your screen.

Just lower the width of the div element, it will automatically expand to 100% of the parent. The floating facebook button to the right, as you have already done, should align the button correctly without a scrollbar.

If you don't get a satisfactory solution, you can still declare overflow:hidden in the containing div to suppress scrollbars.

This will be the result: http://jsfiddle.net/poikl/u4kMs/8/

Answer 2

to disable scrolling, try something like:

 .your_div_class{ overflow-x: hidden; overflow-y: scroll; } 

Answer 3

This is because the frame is too small for the width you set in the top div

 <div style="margin-left:auto; margin-right:auto; width:980px;"> 

So, when it is on your web page, you should not get a horizontal scroller. If you do, consider changing the width above.

Answer 4

Try this and don't forget to put the “right-aligned” div before the left-aligned div, even the right div should be “after” graphically.