CODEWITHSUNDEEP
htmlcssscrollbars
Gyonder
Gyonder

Reputation: 3756

Hide horizontal scrollbar

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

Upvotes: 4

Views: 37029

Answers (5)

vasanth
vasanth

Reputation: 715

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

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

Upvotes: 3

Ihsan Khattak
Ihsan Khattak

Reputation: 29

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.

Upvotes: 0

Michał Wrotkowski
Michał Wrotkowski

Reputation: 117

You can try with simples way

BODY {
    overflow-x:hidden;
}

Upvotes: 8

micadelli
micadelli

Reputation: 2482

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;
}

Upvotes: 8

Amy
Amy

Reputation: 7496

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.

Upvotes: 3

Related Questions