Hide horizontal scrollbar

Question

I have a problem with the horizontal scrollbar. I don't want it to show up. Actually it only shows up in Chrome and it doesn't in Internet Explorer. What can I do? I have tried modifying width and padding in the css class, but this changes the layout as well. The content inside test is dynamic so it can overflow vertically, and this is fine because I only don't want horizontal scrollbar.

HTML:

<div class="test">
    <table>
        <tr>
            <td>test</td>
        </tr>
    </table>
</div>

CSS:

.test {
    BORDER-TOP: #7F9DB9 1px solid;
    BORDER-RIGHT: #7F9DB9 1px solid;
    BORDER-LEFT: #7F9DB9 1px solid;
    BORDER-BOTTOM: #7F9DB9 1px solid;
    WIDTH: 100%;
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 10px;
    PADDING-BOTTOM: 10px;
    PADDING-TOP: 10px;
    HEIGHT: 100%;
    BACKGROUND-COLOR: #ffffff
}

here is a fiddle if you need it: http://jsfiddle.net/XLY9L/

Thanks

Answer 1

There's a simple solution for this, just add this to your CSS declaration:

box-sizing: border-box;

The reason for horizontal scrollbar appears is that padding and border is by default added to whatever width you give to your element. By setting it explicitly to border-box, the padding and border are included in that width value.

This property is supported in IE8+, FireFox 19+ (by using -moz-box-sizing) and iOS Safari and Android (by using -webkit-box-sizing)

Also, I strongly suggest using shorthand css, as follows:

.test {
    BOX-SIZING: border-box;
    WIDTH: 100%;
    HEIGHT: 100%;
    PADDING: 10px 0 10px 10px;
    BORDER: #7F9DB9 1px solid;
    BACKGROUND-COLOR: #ffffff;
}

Answer 2

You can try with simples way

BODY {
    overflow-x:hidden;
}

Answer 3

Alternatively to @micadelli's answer, you could remove the width: 100% because <div class="test"> is a block-level element and will automatically fill the horizontal space that it's occupying in the current container.

Answer 4

Add this code to your CSS. It will disable your horizontal scroll bar.

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

Answer 5

you can also try this simple css code in you website. just write overflow-x:hidden; on body tag. it will be hide from your body.