title: CSS: How to limit horizontal/vertical scrolling?
body: <h1>Details</h1>
  
  <p>I have made a <code>div</code> navigator for my website, there are 4 menu buttons which float left, and 1 authentication button which floats right. The navigators position is relative so it doesn't move.</p>
  
  <p>CODE</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background-color: #2B2B2B;
  }
  .main {
    position: relative;
    top: 0%;
    left: 0%;
    right: 0%;
    width: 101.6%;
    height: 10%;
    z-index: 1;
    min-height: 120px;
    max-height: 120px;
    background-color: rgba(26, 26, 26, 0.9);
  }
  .logo {
    display: block;
    float: left;
    top: 0%;
    left: 0%;
    right: 0%;
    /*background-image: url('images/logo.png');
   width: 150px;
   height: 155px;*/
    font-size: 32pt;
    color: white;
    margin-top: 3%;
    margin-left: 1%;
  }
  .menu {
    display: inline-block;
    position: relative;
    top: 0%;
    left: 0%;
    right: 0%;
    background-color: rgba(26, 26, 26, 0.9);
    height: 100%;
    width: 101%;
    border-style: solid;
    border-color: rgba(26, 26, 26, 0.9);
    border-radius: 0%;
    z-index: 1;
    max-height: 7%;
    max-width: 102.5%;
    min-height: 50px;
    min-width: 100%;
    overflow: hidden;
  }
  .Button1 {
    display: block;
    font-size: 10pt;
    float: left;
    right: 15%;
    left: 30%;
    top: 0%;
    white-space: nowrap;
    color: white;
    margin-top: 0%;
    width: 7%;
    font-family: sans-serif;
    height: 3%;
    padding: 25px 2px 55px 2px;
    vertical-align: center;
    text-align: center;
    line-height: 6px;
    border-right: 1px solid rgba(0, 0, 0, 0.25);
    border-left: 1px solid rgba(0, 0, 0, 0.25);
    ;
    box-shadow: 1px 0 rgba(255, 255, 255, 0.03);
    border-radius: 5px;
    min-width: 70px;
    transition: 0.1s ease-in;
    -o-transition: 0.1s ease-in;
    -ms-transition: 0.1s ease-in;
    -moz-transition: 0.1s ease-in;
    -webkit-transition: 0.1s ease-in;
  }
  .Button1:hover {
    color: #C90205;
  }
  .Button2 {
    font-size: 10pt;
    float: left;
    right: 10%;
    left: 23%;
    top: 10%;
    white-space: nowrap;
    color: white;
    width: 7%;
    margin-top: 0%;
    font-family: sans-serif;
    height: 3%;
    text-align: center;
    padding: 25px 0px 55px 0px;
    text-align: center;
    vertical-align: center;
    line-height: 6px;
    border-right: 1px solid rgba(0, 0, 0, 0.25);
    border-left: 1px solid rgba(0, 0, 0, 0.25);
    ;
    box-shadow: 1px 0 rgba(255, 255, 255, 0.03);
    border-radius: 5px;
    min-width: 70px;
    transition: 0.1s ease-in;
    -o-transition: 0.1s ease-in;
    -ms-transition: 0.1s ease-in;
    -moz-transition: 0.1s ease-in;
    -webkit-transition: 0.1s ease-in;
  }
  .Button2:hover {
    color: #C90205;
  }
  .Button3 {
    font-size: 10pt;
    float: left;
    right: 10%;
    left: 23%;
    top: 3%;
    white-space: nowrap;
    color: white;
    margin-top: 0%;
    width: 7%;
    font-family: sans-serif;
    height: 3%;
    text-align: center;
    padding: 25px 0px 55px 0px;
    text-align: center;
    line-height: 6px;
    border-right: 1px solid rgba(0, 0, 0, 0.25);
    border-left: 1px solid rgba(0, 0, 0, 0.25);
    ;
    box-shadow: 1px 0 rgba(255, 255, 255, 0.03);
    border-radius: 5px;
    min-width: 70px;
    transition: 0.1s ease-in;
    -o-transition: 0.1s ease-in;
    -ms-transition: 0.1s ease-in;
    -moz-transition: 0.1s ease-in;
    -webkit-transition: 0.1s ease-in;
  }
  .Button3:hover {
    color: #C90205;
  }
  .Button4 {
    font-size: 10pt;
    float: left;
    right: 10%;
    left: 23%;
    top: 3%;
    white-space: nowrap;
    color: white;
    margin-top: 0%;
    width: 7%;
    font-family: sans-serif;
    height: 3%;
    text-align: center;
    padding: 25px 0px 55px 0px;
    text-align: center;
    line-height: 6px;
    border-right: 1px solid rgba(0, 0, 0, 0.25);
    border-left: 1px solid rgba(0, 0, 0, 0.25);
    ;
    box-shadow: 1px 0 rgba(255, 255, 255, 0.03);
    border-radius: 5px;
    min-width: 70px;
    transition: 0.1s ease-in;
    -o-transition: 0.1s ease-in;
    -ms-transition: 0.1s ease-in;
    -moz-transition: 0.1s ease-in;
    -webkit-transition: 0.1s ease-in;
  }
  .Button4:hover {
    color: #C90205;
  }
  .Button5 {
    font-size: 10pt;
    float: left;
    right: 10%;
    left: 23%;
    top: 3%;
    white-space: nowrap;
    color: white;
    margin-top: 0%;
    width: 7%;
    font-family: sans-serif;
    height: 3%;
    text-align: center;
    padding: 25px 0px 55px 0px;
    text-align: center;
    line-height: 6px;
    border-right: 1px solid rgba(0, 0, 0, 0.25);
    border-left: 1px solid rgba(0, 0, 0, 0.25);
    ;
    box-shadow: 1px 0 rgba(255, 255, 255, 0.03);
    border-radius: 5px;
    min-width: 70px;
    transition: 0.1s ease-in;
    -o-transition: 0.1s ease-in;
    -ms-transition: 0.1s ease-in;
    -moz-transition: 0.1s ease-in;
    -webkit-transition: 0.1s ease-in;
  }
  .Button5:hover {
    color: #C90205;
  }
  .Button6 {
    font-size: 10pt;
    float: left;
    right: 10%;
    left: 23%;
    top: 8%;
    white-space: nowrap;
    color: white;
    margin-top: 0%;
    font-family: sans-serif;
    height: 10%;
    width: 7%;
    text-align: center;
    height: 10%;
    text-align: center;
    padding: 28px 0px 55px 0px;
    text-align: center;
    line-height: 2px;
    border-right: 1px solid rgba(0, 0, 0, 0.25);
    border-left: 1px solid rgba(0, 0, 0, 0.25);
    ;
    box-shadow: 1px 0 rgba(255, 255, 255, 0.03);
    border-radius: 5px;
    min-width: 70px;
    transition: 0.1s ease-in;
    -o-transition: 0.1s ease-in;
    -ms-transition: 0.1s ease-in;
    -moz-transition: 0.1s ease-in;
    -webkit-transition: 0.1s ease-in;
  }
  .Button6:hover {
    color: #C90205;
  }
  .signin {
    float: right;
    width: 114px;
    height: 42px;
    margin-top: 0.5%;
    margin-right: 1.9%;
    color: red;
  }
  .mainpage {
    height: 100%;
    width: 80%;
  }
  html,
  body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="main"&gt;
    &lt;a class="logo" href="/" style="text-decoration:none"&gt;My Website&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div class="menu"&gt;
    &lt;a class="Button1" href="/" style="text-decoration:none"&gt;Button 1&lt;/a&gt;
    &lt;a class="Button2" href="/" style="text-decoration:none"&gt;Button 2&lt;/a&gt;
    &lt;a class="Button3" href="/" style="text-decoration:none"&gt;Button 3&lt;/a&gt;
    &lt;a class="Button4" href="/" style="text-decoration:none"&gt;Button 4&lt;/a&gt;
    &lt;a class="Button5" href="/support" style="text-decoration:none"&gt;Button 5&lt;/a&gt;
    &lt;a class="Button5" href="/" style="text-decoration:none"&gt;Button 6&lt;/a&gt;
    &lt;a class="signin" href="/login" style="text-decoration:none"&gt;AuthButton&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div class="mainpage"&gt;&lt;/div&gt;
  &lt;!-- This is page under the navigator for placing the content, right now it's empty --&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://jsfiddle.net/3125ygjf/1" rel="nofollow">Fiddle</a>.</p>
  
  <hr>
  
  <h1>Problem</h1>
  
  <p>Unfortunately if you look at <a href="https://jsfiddle.net/3125ygjf/1/embedded/result" rel="nofollow">this</a>, and try to scroll horizontally you will see the overflow and it would just stay there, even though when I had the bottom content container <code>mainpage</code> div with the <code>height</code> of 100% and <code>width</code> of 80%, it would still be able to scroll down when there's nothing there at all.</p>
  
  <p>As you see this code below, I have tried to limit <code>html</code> and <code>body</code> with specific resolution, which didn't fix my problem.</p>
  
  <pre class="lang-css prettyprint-override"><code>html, body {margin:0;padding:0;height:100%;width:100%}
  </code></pre>
  
  <h1>Question</h1>
  
  <p>How could i limit my page from being scrolled in specific resolution only? </p>
  
  <p>Can resolution be greater than value of 100% so it can work? </p>