As I build a frame and grid for my website, an issue arises whenever the page extends to display the vertical scrollbar, the horizontal one appears as well. I've experimented with various overflow-y settings like auto or hidden, but none of them seem to solve the problem. Could this be related to my use of vw sizes throughout? Here's the Fiddle - http://jsfiddle.net/u11812br/
HTML
<header>
<img src="img/logo_big.png"/>
<button class="menu">
<a href="#menu">☰</a>
</button>
<nav style="display:none;">
<a href=""><p>HOME / GEDANE ZAKEN</p></a>
<a href=""><p>CONTACT</p></a>
</nav>
</header>
<div class="spacer"></div>
<center>
<div class="gridcontainer">
<div class="section group">
<div class="col span_2_of_2">
<img src="img/img1.png"/>
</div>
</div>
<div class="section group">
<div class="col span_1_of_2">
<img src="img/img1.png"/>
</div>
<div class="col span_1_of_2">
<img src="img/img1.png"/>
</div>
</div>
<div class="section group">
<div class="col span_2_of_3">
<img src="img/img1.png"/>
</div>
</div>
<div class="section group">
<div class="col span_2_of_3">
<img src="img/img1.png"/>
</div>
</div>
<div class="section group">
<div class="col span_1_of_2">
<img src="img/img1.png"/>
</div>
<div class="col span_1_of_2">
<img src="img/img1.png"/>
</div>
</div>
<div class="section group">
<div class="col span_2_of_2">
<img src="img/img1.png"/>
</div>
</div>
</div>
</center>
CSS
body, html {
height: 100%;
margin: 0;
padding: 0;
border: none;
left: 0;
top: 0;
width: 100%;
}
body {
background: #f6cb4a; /* Old browsers */
background: -moz-linear-gradient(top, #ebe7e7 0%, #f3f2f2 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color- stop(0%,#ebe7e7), color-stop(100%,#f3f2f2)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ebe7e7 0%,#f3f2f2 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ebe7e7 0%,#f3f2f2 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ebe7e7 0%,#f3f2f2 100%); /* IE10+ */
background: linear-gradient(top, #ebe7e7 0%,#f3f2f2 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebe7e7', endColorstr='#f3f2f2',GradientType=0 ); /* IE6-9 */
height: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
width: 100%;
background-position: 0px 0px;
}
header {
width: 100vw;
height: 65px;
background: white;
position: fixed;
z-index: 9999;
top: 0px;
}
header img {
width: 85px;
margin-left: 40px;
margin-top: 3px;
}
.spacer {
height: 80px;
width: 100vw;
}
button {
position: absolute;
right: 10vw;
border: none;
margin: 0;
padding: 0;
background: none;
}
button a {
font-size: 4em;
text-decoration: none;
color: grey;
}
nav {
position: fixed;
top: 65px;
}
nav p {
width: 100vw;
padding: 25px 0px 25px 0px;
background: white;
margin: 0px;
border-top: 1px solid #ededed;
transition: 0.3s;
}
nav p:hover {
background: #ededed;
}
nav a {
text-align: center;
text-decoration: none;
color: #333;
}
.gridcontainer {
width: 95vw;
}
.section {
clear: both;
padding: 0px;
margin: 0px;
}
.col {
display: block;
float:left;
margin: 1% 0 1% 1.5%;
background: green;
}
.col:first-child { margin-left: 0; }
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
/* GRID OF TWO */
.span_2_of_2 {
width: 100%;
}
.span_1_of_2 {
width: 49.25%;
}
.span_2_of_3 {
width: 49.25%;
}
.span_1_of_2 img {
width: 47vw;
height: 65vw;
display: inline-block;
}
.span_2_of_2 img {
width: 95vw;
height: 60vw;
}
.span_2_of_3 img {
width: 95vw;
height: 30vw;
}
@media only screen and (max-width: 480px) {
.col {
margin: 1% 0 1% 0%;
}
}
@media only screen and (max-width: 480px) {
.span_2_of_2, .span_1_of_2 { width: 100%; }
}