How do I validly make it so a webpage can scroll y but not x?

I'm trying to make a web-page with 开发者_如何学编程a 100% with div with padding, but when I do this I end up with a horizontal scroll bar. So I'm adding overflow: hidden to the bod to fix it, but it prevents me from scrolling on the y-axis. So How can I get just the x axis to be overflow: hidden?

You don't need to mess with the scrollbars. Just create another div in the current one for padding.

[Demo]

<style>
#outer { width:100%; } 
#inner { padding:50px; }
</style>

<div id="outer">
    <div id="inner">100% width with padding</div>
</div>

try overflow-x:hidden; This should work