I'm a student learning about web development, and I'm building a website right now! So basically, I'm trying to make something similar to mit.edu, where the right side scrolls while the left side remains fixed. I found articles on how to do something like that on W3Schools, and I was thinking I could just replace the "sidebar" with my "left" div, and increase its size. However, I'm having a lot of difficulty with this...
* {
margin: 0;
box-sizing: border-box;
}
/* The grid container */
.grid-container {
height: 100vh;
display: grid;
grid-template-areas:
'left right'
'footer right';
}
.grid-item {
}
.left {
grid-area: left;
padding-top: 100px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
background-color: #ccc;
max-width: 45em;
word-wrap: break-word;
height: 100%;
position: fixed;
}
#welcomemessagep {
font-family: century gothic, sans-serif;
color: white;
font-size: 20px;
padding: 20px;
}
.searchbar {
padding: 20px;
width: 100%;
display: inline-flex;
justify-content: center;
}
.searchbarinput {
flex: grow 1;
padding: 10px;
outline: none;
border: 1px solid purple;
border-radius: 5px 0 0 5px;
background: white;
transition: background 0.25s, box-shadow 0.25s;
width: 75%;
height: 5vh;
}
.searchbarinput:focus {
background: white;
box-shadow: 0 0 2px purple;
}
.searchbarinput::placeholder {
color: purple;
}
.searchbarbutton {
width: 40px;
background: purple;
color: white;
outline: none;
border: none;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0 5px 5px 0;
cursor: pointer;
user-select: none;
}
.searchbarbutton:active {
box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.25);
}
.right {
grid-area: right;
padding-top: 100px;
grid-template-areas:
'announcements'
'hero'
'blurb'
'articles';
background-color: black;
overflow: auto;
position: absolute;
right: 0;
width: 50%;
}
#announcements-text {
font-family: century gothic, sans-serif;
color: red;
padding: 20px;
font-size: 20px;
padding: 20px;
}
#hero {
background-image: url("images/horse.jpg");
height: 100vh;
width: 100%;
}
#blurb-text {
font-family: century gothic, sans-serif;
color: white;
font-size: 40px;
padding: 20px;
}
.articles {
font-family: century gothic, sans-serif;
color: white;
font-size: 40px;
padding: 20px;
}
#articles-text {
font-family: century gothic, sans-serif;
color: white;
font-size: 40px;
padding-bottom: 20px;
padding-left: 10px;
}
#article1, #article2, #article3, #article4, #article5, #article6, #article7, #article8, #article9, #article10 {
border: 3px solid white;
color: white;
padding: 10px;
}
#article1:hover, #article2:hover, #article3:hover, #article4:hover, #article5:hover, #article6:hover, #article7:hover, #article8:hover, #article9:hover, #article10:hover {
background-color: purple;
}
a:link {
text-decoration: none;
color: black;
}
a:visited {
color: black;
}
a:active {
color: black;
}
.footer{
grid-area: footer;
background-color: #ccc;
height: 100%;
position: fixed;
}
.navbar {
font-family: century gothic, sans-serif;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
display: flex;
justify-content: center;
transition: top 0.3s;
padding: 20px;
z-index: 1;
}
.logo {
width: 3em;
height: 3em;
}
.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 15px;
text-decoration: none;
}
.navbar a:hover {
text-decoration: underline;
text-underline-offset: 8px;
}
.cards {
height: 20vh;
display: grid;
grid-template-areas:
'membership-card facebook-card'
'donate-card rentals-card';
gap: 2em;
padding: 30px;
}
#membership-card, #facebook-card, #donate-card, #rentals-card {
text-align: center;
font-size: 20px;
font-weight: bold;
padding: 20px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
border-radius: 5px;
}
#membership-card:hover, #facebook-card:hover, #donate-card:hover, #rentals-card:hover {
box-shadow: 0 16px 32px 0 rgba(0,0,0,0.2);
}
.container {
padding: 2px 16px;
}
#iconsize {
font-size: 50px;
color: purple;
}
#smallblurbs {
text-align: center;
font-size: 15px;
font-weight: normal;
}
p {
font-size: 40px;
}][1]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Elk Beaver Lake Equestrian Society</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class="navbar" id="navbar">
<img class="logo" src="images/logo.png">
<a href="#home">Home</a>
<a href="#membership">Membership</a>
<a href="#facilities">Facilities</a>
<a href="#trails">Trails</a>
<a href="#aboutus">About Us</a>
<a href="https://www.facebook.com/parkridersunited/">Facebook</a>
</div>
<div class="grid-container">
<div class="grid-item left">
<form action="index.html" method="get">
<div id="welcomemessage"> <p id="welcomemessagep"> Welcome to EBLES! EBLES promotes sensible riding in Elk/Beaver Lake Park so that the equestrian community
can co-exist with all users of the park. The community rings remain in existence because EBLES and our members maintain it for the use of everyone.</p></div>
<div class="searchbar">
<input type="text" class="searchbarinput" name="search" placeholder="Search the Website!">
<button type="submit" class="searchbarbutton">
<i class="material-icons">search</i>
</button>
</div>
</form>
<div class="cards">
<a href="membership.html"> <div id="membership-card">
<i class="material-icons" id="iconsize">people</i>
<div class="container">
<p>Membership</p>
<p id=smallblurbs>Buy your 2021 membership!</p>
</div>
</div>
</a>
<a href="https://www.facebook.com/parkridersunited/"> <div id="facebook-card">
<i class="material-icons" id="iconsize">facebook</i>
<div class="container">
<p>Facebook</p>
<p id=smallblurbs>Join our community!</p>
</div>
</div>
</a>
<a href="aboutus.html"><div id="donate-card">
<i class="material-icons" id="iconsize">savings</i>
<div class="container">
<p>Donate</p>
<p id=smallblurbs>Help support local riders!</p>
</div>
</div>
</a>
<a href="facilities.html"><div id="rentals-card">
<i class="material-icons" id="iconsize">bedroom_baby</i>
<div class="container">
<p>Rentals</p>
<p id=smallblurbs>Want to ride? Give rentals a try!</p>
</div>
</div>
</a>
</div>
</div>
<div class="grid-item footer">
footer
</div>
<div class="grid-item right">
<div id="announcements">
<p id=announcements-text> Following recommendations by HCBC and Equine Canada, the 2020 EBLES Annual Poker Ride and Trail Class is postponed. Click here for more info! </p>
</div>
<div id="hero">
</div>
<div id="blurb">
<p id=blurb-text> Horses are amazing. People who ride them are too. Join us today. </p>
</div>
<br>
<div class="articles">
<p id=articles-text> Here's some articles for you to read: </p>
<a href="https://ebles.org/files/eblesminutesdec2020.pdf"><div id="article1"> May 3, 2021 - May 2021 Minutes </p> </div> </a>
<div id="article2"> <p> April 6, 2021 - April 2021 Minutes </p> </div>
<div id="article3"> <p> April 1, 2021 - New Baby Horse is Born!</p></div>
<div id="article4"> <p> March 24, 2021 - New COVID-19 Updates </p></div>
<div id="article5"> <p> March 2, 2021 - March 2021 Minutes </p></div>
<div id="article6"> <p> February 8, 2021 - February 2021 Minutes </p></div>
<div id="article7"> <p> January 9, 2021 - January 2021 Minutes </p></div>
<div id="article8"> <p> January 1, 2021 - Happy New Year! </p></div>
<div id="article9"> <p> December 25, 2020 - Merry Christmas to All! Stay safe! </p></div>
<div id="article10"> <p> December 4, 2020 - December 2020 Minutes </p></div>
</div>
</div>
</div>
<script>
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("navbar").style.top = "0";
} else {
document.getElementById("navbar").style.top = "-20%";
}
prevScrollpos = currentScrollPos;
}
</script>
</body>
</html>
I would really appreciate any sort of help - I've spent hours and hours on this and I've come up with nothing. Thank you so much in advance!
Edit: [I've tried Mr Arceno's fix, but it covers both my nav and my right side.]Here's what it looks like after the second round of fixes
Add these two styles for your left class.
height: 100%;
position: fixed;
On your right class add these:
width: 50%;
position: absolute;
right: 0;
Then on the navbar add:
z-index: 1
* {
margin: 0;
box-sizing: border-box;
}
/* The grid container */
.grid-container {
height: 100vh;
display: grid;
grid-template-areas:
'left right'
'footer right';
}
.grid-item {
}
.left {
/*grid-area: left;*/
height: 100%;
position: fixed;
padding-top: 100px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
background-color: #ccc;
max-width: 45em;
word-wrap: break-word;
}
#welcomemessagep {
font-family: century gothic, sans-serif;
color: white;
font-size: 20px;
padding: 20px;
}
.searchbar {
padding: 20px;
width: 100%;
display: inline-flex;
justify-content: center;
}
.searchbarinput {
flex: grow 1;
padding: 10px;
outline: none;
border: 1px solid purple;
border-radius: 5px 0 0 5px;
background: white;
transition: background 0.25s, box-shadow 0.25s;
width: 75%;
height: 5vh;
}
.searchbarinput:focus {
background: white;
box-shadow: 0 0 2px purple;
}
.searchbarinput::placeholder {
color: purple;
}
.searchbarbutton {
width: 40px;
background: purple;
color: white;
outline: none;
border: none;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0 5px 5px 0;
cursor: pointer;
user-select: none;
}
.searchbarbutton:active {
box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.25);
}
.right {
grid-area: right;
padding-top: 100px;
grid-template-areas:
'announcements'
'hero'
'blurb'
'articles';
background-color: black;
width: 50%;
position: absolute;
right: 0;
}
#announcements-text {
font-family: century gothic, sans-serif;
color: red;
padding: 20px;
font-size: 20px;
padding: 20px;
}
#hero {
background-image: url("images/horse.jpg");
height: 100vh;
width: 100%;
}
#blurb-text {
font-family: century gothic, sans-serif;
color: white;
font-size: 40px;
padding: 20px;
}
.articles {
font-family: century gothic, sans-serif;
color: white;
font-size: 40px;
padding: 20px;
}
#articles-text {
font-family: century gothic, sans-serif;
color: white;
font-size: 40px;
padding-bottom: 20px;
padding-left: 10px;
}
#article1, #article2, #article3, #article4, #article5, #article6, #article7, #article8, #article9, #article10 {
border: 3px solid white;
color: white;
padding: 10px;
}
#article1:hover, #article2:hover, #article3:hover, #article4:hover, #article5:hover, #article6:hover, #article7:hover, #article8:hover, #article9:hover, #article10:hover {
background-color: purple;
}
a:link {
text-decoration: none;
color: black;
}
a:visited {
color: black;
}
a:active {
color: black;
}
.footer{
grid-area: footer;
background-color: #ccc;
}
.navbar {
font-family: century gothic, sans-serif;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
display: flex;
justify-content: center;
transition: top 0.3s;
padding: 20px;
z-index: 1;
}
.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 15px;
text-decoration: none;
}
.navbar a:hover {
text-decoration: underline;
text-underline-offset: 8px;
}
.cards {
height: 20vh;
display: grid;
grid-template-areas:
'membership-card facebook-card'
'donate-card rentals-card';
gap: 2em;
padding: 30px;
}
#membership-card, #facebook-card, #donate-card, #rentals-card {
text-align: center;
font-size: 20px;
font-weight: bold;
padding: 20px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
border-radius: 5px;
}
#membership-card:hover, #facebook-card:hover, #donate-card:hover, #rentals-card:hover {
box-shadow: 0 16px 32px 0 rgba(0,0,0,0.2);
}
.container {
padding: 2px 16px;
}
#iconsize {
font-size: 50px;
color: purple;
}
#smallblurbs {
text-align: center;
font-size: 15px;
font-weight: normal;
}
p {
font-size: 40px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Elk Beaver Lake Equestrian Society</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class="navbar" id="navbar">
<a href="#home">Home</a>
<a href="#membership">Membership</a>
<a href="#facilities">Facilities</a>
<a href="#trails">Trails</a>
<a href="#aboutus">About Us</a>
<a href="https://www.facebook.com/parkridersunited/">Facebook</a>
</div>
<div class="grid-container">
<div class="grid-item left">
<form action="index.html" method="get">
<div id="welcomemessage">
<p id="welcomemessagep"> Welcome to EBLES! EBLES promotes sensible riding in Elk/Beaver Lake Park so that the equestrian community can co-exist with all users of the park. The community rings remain in existence because EBLES and our members maintain it for the use
of everyone.</p>
</div>
<div class="searchbar">
<input type="text" class="searchbarinput" name="search" placeholder="Search the Website!">
<button type="submit" class="searchbarbutton">
<i class="material-icons">search</i>
</button>
</div>
</form>
<div class="cards">
<a href="membership.html">
<div id="membership-card">
<i class="material-icons" id="iconsize">people</i>
<div class="container">
<p>Membership</p>
<p id=smallblurbs>Buy your 2021 membership!</p>
</div>
</div>
</a>
<a href="https://www.facebook.com/parkridersunited/">
<div id="facebook-card">
<i class="material-icons" id="iconsize">facebook</i>
<div class="container">
<p>Facebook</p>
<p id=smallblurbs>Join our community!</p>
</div>
</div>
</a>
<a href="aboutus.html">
<div id="donate-card">
<i class="material-icons" id="iconsize">savings</i>
<div class="container">
<p>Donate</p>
<p id=smallblurbs>Help support local riders!</p>
</div>
</div>
</a>
<a href="facilities.html">
<div id="rentals-card">
<i class="material-icons" id="iconsize">bedroom_baby</i>
<div class="container">
<p>Rentals</p>
<p id=smallblurbs>Want to ride? Give rentals a try!</p>
</div>
</div>
</a>
</div>
</div>
<div class="grid-item footer">
footer
</div>
<div class="grid-item right">
<div id="announcements">
<p id=announcements-text> Following recommendations by HCBC and Equine Canada, the 2020 EBLES Annual Poker Ride and Trail Class is postponed. Click here for more info! </p>
</div>
<div id="hero">
</div>
<div id="blurb">
<p id=blurb-text> Horses are amazing. People who ride them are too. Join us today. </p>
</div>
<br>
<div class="articles">
<p id=articles-text> Here's some articles for you to read: </p>
<a href="https://ebles.org/files/eblesminutesdec2020.pdf">
<div id="article1"> May 3, 2021 - May 2021 Minutes </p>
</div>
</a>
<div id="article2">
<p> April 6, 2021 - April 2021 Minutes </p>
</div>
<div id="article3">
<p> April 1, 2021 - New Baby Horse is Born!</p>
</div>
<div id="article4">
<p> March 24, 2021 - New COVID-19 Updates </p>
</div>
<div id="article5">
<p> March 2, 2021 - March 2021 Minutes </p>
</div>
<div id="article6">
<p> February 8, 2021 - February 2021 Minutes </p>
</div>
<div id="article7">
<p> January 9, 2021 - January 2021 Minutes </p>
</div>
<div id="article8">
<p> January 1, 2021 - Happy New Year! </p>
</div>
<div id="article9">
<p> December 25, 2020 - Merry Christmas to All! Stay safe! </p>
</div>
<div id="article10">
<p> December 4, 2020 - December 2020 Minutes </p>
</div>
</div>
</div>
</div>
<script>
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("navbar").style.top = "0";
} else {
document.getElementById("navbar").style.top = "-20%";
}
prevScrollpos = currentScrollPos;
}
</script>
</body>
</html>
See it here on this fiddle.