Remove horizontal scroll bar in CSS

Question

I am using a facebook like button on my web page. I need it to align at the right side of the page. But there is a horizontal scroll bar displaying.

Please see the fidd

Answer 1

to disable scroll, try something like;

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

Answer 2

The scrollbar appears because the content is too wide for your screen.

Just omit the width on the div element, it will auto-expand to 100% of it's parent. Floating the facebook button to the right like you already did should then align the button correctly without scrollbar.

If you don't get a satisfying solution you can still declare overflow:hidden on the containing div to supress the scrollbars.

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

Answer 3

It's because the frame is too small for the width that you have set on the top div

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

So when this is on your web page yo shouldn't get the horizontal scroller. If you do, then consider changing the above width