CSS: How to limit horizontal/vertical scrolling? - html

Question

Details
I have made a div 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.
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%
}
<div class="main">
<a class="logo" href="/" style="text-decoration:none">My Website</a>
</div>
<div class="menu">
<a class="Button1" href="/" style="text-decoration:none">Button 1</a>
<a class="Button2" href="/" style="text-decoration:none">Button 2</a>
<a class="Button3" href="/" style="text-decoration:none">Button 3</a>
<a class="Button4" href="/" style="text-decoration:none">Button 4</a>
<a class="Button5" href="/support" style="text-decoration:none">Button 5</a>
<a class="Button5" href="/" style="text-decoration:none">Button 6</a>
<a class="signin" href="/login" style="text-decoration:none">AuthButton</a>
</div>
<div class="mainpage"></div>
<!-- This is page under the navigator for placing the content, right now it's empty -->
Fiddle.
Problem
Unfortunately if you look at this, 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 mainpage div with the height of 100% and width of 80%, it would still be able to scroll down when there's nothing there at all.
As you see this code below, I have tried to limit html and body with specific resolution, which didn't fix my problem.
html, body {margin:0;padding:0;height:100%;width:100%}
Question
How could i limit my page from being scrolled in specific resolution only?
Can resolution be greater than value of 100% so it can work?

Answer 1

your problem is here:
.main {
width: 101.6%;
}
.mainpage {
height: 100%;
width: 80%;
}
I tweaked your code merging all those buttons classes into one. you had invalid/unused properties there.
you need to fix those properties mentioned above like this:
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
margin: 0;
height: 100%;
background-color: #2B2B2B
}
.main {
position: relative;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 10%;
min-height: 120px;
max-height: 120px;
background-color: rgba(26, 26, 26, 0.9)
}
.logo {
float: left;
top: 0;
left: 0;
right: 0;
/*background-image: url('images/logo.png');
width: 150px;
height: 155px;*/
font-size: 32pt;
color: white;
margin: 3% 0 0 1%
}
.menu {
display: inline-block;
position: relative;
top: 0;
left: 0;
right: 0;
background-color: rgba(26, 26, 26, 0.9);
border: solid rgba(26, 26, 26, 0.9);
border-radius: 0;
z-index: 1;
min-height: 50px;
min-width: 100%
}
.Button {
font-size: 10pt;
float: left;
font-family: sans-serif;
padding: 25px 2px 55px;
border: solid rgba(0, 0, 0, 0.25);
border-width: 0 1px;
white-space: nowrap;
color: white;
width: 7%;
text-align: center;
line-height: 6px;
border-radius: 5px;
min-width: 70px;
transition: 0.1s ease-in;
text-decoration: none
}
.Button:hover {
color: #C90205;
}
.signin {
float: right;
width: 114px;
height: 42px;
margin-top: 0.5%;
margin-right: 1.9%;
color: red;
}
.mainpage {
height: calc(100% - 216px);
width: 100%;
}
<div class="main">
<a class="logo" href="/" style="text-decoration:none">My Website</a>
</div>
<div class="menu">
<a class="Button b1" href="/">Button 1</a>
<a class="Button b2" href="/">Button 2</a>
<a class="Button b3" href="/">Button 3</a>
<a class="Button b4" href="/">Button 4</a>
<a class="Button b5" href="/support">Button 5</a>
<a class="Button b6" href="/">Button 6</a>
<a class="signin" href="/login">AuthButton</a>
</div>
<div class="mainpage"></div>
<!-- This is page under the navigator for placing the content, right now it's empty -->

Answer 2

Another approach with smaller CSS can be seen here: https://jsfiddle.net/3125ygjf/3/
Perhaps you should also have a look at the flexbox-model. There you don't have to care about the absolute positioning. The container gets display: flex; flex-direction: column;and than you can place the header, menu and main in there. You just have give the main-div the needed hight and make it scrollable. That's it.
*edit: In addition all your buttons have a width of 7% i.e. This will cause trouble later on when you change the text for example. Try to avoid such width-values.

Answer 3

There are several things wrong in your code, I will list as many as I could notice:
div elements by default are 100% width, so you do not need to specify it. If you are trying to make some sort of hack using more than 100% because it is not fitting the whole x-axis of your viewport, something is wrong with your code.
A class serves as a multiple selector, meaning that you can just use one class for all your buttons if they all share the same CSS properties.
If you are defining max-height and min-height with the same value, why not just use height.
body has a margin by default in different browsers, generally it is around 8px, so you can remove it by using margin: 0.
Your main css property should always come after your vendor prefixes such as -webkit-, -moz-, etc.
When you use zero in your css properties, there is no need to specify px, pt, % or any other unit, since 0 will always be computed as 0px.
JSFiddle
CODE SNIPPET:
body {
background-color: #2B2B2B;
margin: 0
}
.main {
position: relative;
height: 10%;
z-index: 1;
height: 120px;
background-color: rgba(26, 26, 26, 0.9);
}
.logo {
display: block;
float: left;
/*background-image: url('images/logo.png');
width: 150px;
height: 155px;*/
font-size: 32pt;
color: white;
margin-top: 3%;
margin-left: 1%;
}
.menu {
position: relative;
background-color: rgba(26, 26, 26, 0.9);
height: 100%;
border-style: solid;
border-color: rgba(26, 26, 26, 0.9);
border-radius: 0;
z-index: 1;
height: 50px;
overflow: hidden;
}
.btn {
font-size: 10pt;
white-space: nowrap;
color: white;
float: left;
margin-top: 0;
width: 7%;
font-family: sans-serif;
padding: 25px 0 55px 0;
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;
-o-transition: 0.1s ease-in;
-ms-transition: 0.1s ease-in;
-moz-transition: 0.1s ease-in;
-webkit-transition: 0.1s ease-in;
transition: 0.1s ease-in;
}
.btn:hover {
color: #C90205;
}
.signin {
float: right;
width: 114px;
height: 42px;
margin-top: 0.5%;
margin-right: 1.9%;
color: red;
}
.mainpage {
height: 100%;
}
<div class="main">
<a class="logo" href="/" style="text-decoration:none">My Website</a>
</div>
<div class="menu">
<a class="btn" href="/" style="text-decoration:none">Button 1</a>
<a class="btn" href="/" style="text-decoration:none">Button 2</a>
<a class="btn" href="/" style="text-decoration:none">Button 3</a>
<a class="btn" href="/" style="text-decoration:none">Button 4</a>
<a class="btn" href="/support" style="text-decoration:none">Button 5</a>
<a class="btn" href="/" style="text-decoration:none">Button 6</a>
<a class="signin" href="/login" style="text-decoration:none">AuthButton</a>
</div>
<div class="mainpage"></div>
<!-- This is page under the navigator for placing the content, right now it's empty -->