css - Vertical scroll bar remove

Question

Below is the code of the menu line with left&right additional images. I need the behavior: when resolution of the screen width something from 960px to 1398px -- left&right divs hides simultaneously. This code DO what I want exactly! The problem is that on the low screen width (960px to 1398px) it adds horizontal scroll bar to the browser :( But on my idea vertical scroll only need for screen width less that 960px. Any suggestions how to solve this? thanks.

html:

<div class="bxt">
            <div class="boxone"></div> 
            <div class="center"></div> 
            <div class="boxtwo"></div> 
</div>

css:

.bxt{
    width:960px;
    height:72px;
    margin:0 auto;
    position:relative;
    /*background-color:#000 */
}
.bxt div{
    position:absolute;
    width:219px;
    /* background:#CCCCCC; */
    top:0;
    height:72px;
    margin:0 0 0 0;
}
.bxt div.boxone{
    left:-219px;
        margin:0 0 0 0;
    background-image:url(images/i_02.jpg)
}
.bxt div.boxtwo{
    right:-219px;
        margin:0 0 0 0;
    background-image:url(images/i_04.jpg)
}
.bxt div.center{
    width:960px;
    height:72px;
    right:0;
    /* background:#AAAAAA; */
    background-image:url(images/i_03.jpg);
}

Answer 1

You could use a media query:

body{
    overflow-y:hidden;
}
@media only screen and (max-width:960px){
    body{
        overflow-y:scroll;
    }
}

That will hide the scroll bar when the browser window is less than than 960px in width.

Answer 2

body{
overflow-y:hidden;
}

Like this?