How to remove blank space from the bottom of a page? [closed] - html

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
Im trying to remove some whitespace from the bottom of my website.
I tried to adjust the .product overflow to hidden but that didnt work.
image of the whitespace im trying to remove
here's my code:
https://jsfiddle.net/w7zemk0d/
Any help would be appreciated :)

Answer 1

The problem is that the last div is being sized using the height of the elements and assumes that the three plan cards are underneath each other, because of that the "prices" div takes up so much vertical space.
If you remove the absolute positioning and switch to a flex layout for the div, there is no gap at the bottom anymore:
body {
overflow-x: hidden;
overflow-y: auto;
background: linear-gradient(90deg, rgb(217, 217, 217, 0.85), rgb(255, 255, 255, 0.85)),url(https://i.pinimg.com/originals/5d/9d/dd/5d9dddca471960cd09ced9539ccb85d7.jpg);
}
#header {
font-family: quicksand;
font-size: 25px;
position: relative;
left: 105px;
top: -80px;
color: white;
}
#header-div {
width: 2000px;
height: 75px;
box-shadow: 5px 5px 8px rgb(128, 128, 128);
background-color: rgb(255, 202, 103);
position: relative;
top: -10px;
left: -10px;
}
#header-img {
position: relative;
top: -12px;
left: 5px;
}
#email {
overflow-x: auto !important;
overflow-y: auto !important;
margin: 20px;
width: 500px;
height: 32px;
border: 1px solid black;
border-radius: 5px;
font-family: quicksand;
font-size: 20px;
}
#email-div {
margin: 20px;
text-align: center;
}
#email-label {
font-family: quicksand;
font-size: 20px;
}
#g-btn {
width: 150px;
height: 30px;
background-color: rgb(255, 194, 81);
font-family: quicksand;
font-size: 18px;
border: none;
border-radius: 5px;
}
#g-btn:hover {
animation-name: button-animation;
animation-duration: 1s;
animation-fill-mode: forwards;
}
#keyframes button-animation {
100% {
background-color: rgb(255, 216, 143);
}
}
#nav-links {
position: relative;
left: 1050px;
top: -123px;
display: flex;
flex-direction: column;
}
#nav-links li {
display: inline;
font-family: quicksand;
font-size: 20px;
}
#nav-links a {
color: white;
text-decoration: none;
word-spacing: 5px;
}
#features {
text-align: center;
}
.features-text {
font-family: quicksand;
font-size: 25px;
display: flex;
flex-direction: row;
justify-content: center;
position: relative;
left: 60px;
top: -35px;
}
#padlock {
position: relative;
top: 35px;
left: -400px;
}
#padlock-text {
top: -90px;
}
#p-header {
position: relative;
top: -60px;
left: -235px;
}
#location {
position: relative;
left: -400px;
top: -10px;
}
#location-text {
position: relative;
top: -145px;
left: 80px;
}
#l-header {
position: relative;
top: -120px;
left: -200px;
}
#mobile {
position: relative;
left: -400px;
top: -65px;
}
#mobile-text {
position: relative;
top: -200px;
left: 160px;
}
#m-header {
position: relative;
top: -185px;
left: -230px;
}
.header-text {
font-family: quicksand;
font-size: 30px;
}
#video {
display: flex;
justify-content: center;
position: relative;
top: -150px;
}
/* Start Of Danger Zone */
.product {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
border: 1px solid black;
border-radius: 5px;
width: 350px;
font-family: quicksand;
margin: 10px;
background-color: white;
overflow-x: hidden !important;
overflow-y: hidden !important;
}
.product li {
list-style: none;
}
.product > .level {
background-color: #ddd;
color: black;
padding: 15px 0;
width: 100%;
border-radius: 5px;
text-transform: uppercase;
font-weight: bolder;
}
.button {
width: 100px;
height: 30px;
background-color: rgb(252, 189, 17);
border: none;
border-radius: 5px;
margin: 10px;
font-family: quicksand;
color: white;
font-size: 20px;
position: relative;
top: -15px;
}
.price {
font-size: 30px;
margin: 10px;
}
#prices{
display:flex;
width: fit-content;
max-width:100%;
margin: auto;
}
.perks {
position: relative;
top: -15px;
}
/* End Of Danger Zone*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FCC: VPN Product Landing Page</title>
<link href="https://fonts.googleapis.com/css2?family=Quicksand&display=swap" rel="stylesheet">
<link rel="stylesheet" href="fccplpstylesheet.css">
</head>
<body>
<div id="main">
<div id="header-div">
<nav id="nav-bar">
<img id="header-img" src="project Images/vpn.jpeg" width="100px" alt="company logo">
<div id="header">Prive9000 VPN Service</div>
<div id="nav-links">
<ul>
<li> Features <span class="middot"> ·</span> </li>
<li> Pricing <span class="middot"> ·</span> </li>
<li> Mobile App </li>
</ul>
</div>
</nav>
</div>
<div id="email-div">
<form action="https://www.freecodecamp.org/email-submit)." id="email-form">
<label for="email" id="email-label"> Please Enter Your Email: <br>
<input id="email" type="email" placeholder=" Enter Your Email" required> <br>
</label>
<button type="submit" id="g-btn">GET STARTED</button>
</form>
</div>
<div id="features">
<img id="padlock" src="Project Images/padlock-key.jpeg" width="100px" height="95px" alt="padlock">
<h2 class="header-text" id="p-header">Privacy Ensured</h2>
<p class="features-text" id="padlock-text">Your Information Is Safe With Us; Privacy Will Never Be A Worry Again</p>
<img id="location" src="Project Images/place-localizer.jpeg" width="100px" height="95px" alt="location-pointer">
<h2 class="header-text" id="l-header">Change Your Location</h2>
<p class="features-text" id="location-text">Change Your Country Whenever You Want!; Connect To Over 190+ Countries</p>
<img id="mobile" src="Project Images/built-mobile.jpeg" width="100px" height="95px" alt="mobile-graphic">
<h2 class="header-text" id="m-header">For All Platforms</h2>
<p class="features-text" id="mobile-text">Apps Built For Both Android And iOS Aswell; Stay Safe No Matter What Platform Your On</p>
</div>
<div id="video">
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/XP4rSoBS_iw" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<!--Start Of Danger Zone-->
<div id="prices">
<div class="product" id="free">
<div class="level">Free Plan</div>
<div class="price">Free</div>
<ul class="perks">
<li>No Payments; 100% Free</li>
<li>Connect To Over 20+ Countries</li>
<li>Ads Included</li>
<li>Doesn't Allow Country Swap</li>
</ul>
<button class="button">Select</button>
</div>
<div class="product" id="paid-monthly">
<div class="level">Monthly Paid Plan</div>
<div class="price">$100</div>
<ul class="perks">
<li>$100 per Month</li>
<li>Connect To Over 100+ Countries</li>
<li>Ads Included</li>
<li>Allows Country Swap For Netflix Only</li>
</ul>
<button class="button">Select</button>
</div>
<div class="product" id="yearly-paid">
<div class="level">Yearly Paid Plan</div>
<div class="price">$800</div>
<ul class="perks">
<li>$800 per Year</li>
<li>Connect To ALL Countries</li>
<li>Ad Free</li>
<li>Allows Country Swap For All Platfroms</li>
</ul>
<button class="button">Select</button>
</div>
</div>
</div>
<!--End Of Danger Zone-->
</div>
</body>
</html>

Answer 2

Your problem is not that you are using absolute positioning, it is because you aren't using absolute positioning. Change relative to absolute on #paid-monthly and #paid-yearly and you should be all set. You'll also need to change top: for both of them as indicated. This will preserve your staggered cards.
body {
overflow-x: hidden;
overflow-y: auto;
background: linear-gradient(90deg, rgb(217, 217, 217, 0.85), rgb(255, 255, 255, 0.85)),url(https://i.pinimg.com/originals/5d/9d/dd/5d9dddca471960cd09ced9539ccb85d7.jpg);
background-size:cover;
}
#header {
font-family: quicksand;
font-size: 25px;
position: relative;
left: 105px;
top: -80px;
color: white;
}
#header-div {
width: 2000px;
height: 75px;
box-shadow: 5px 5px 8px rgb(128, 128, 128);
background-color: rgb(255, 202, 103);
position: relative;
top: -10px;
left: -10px;
}
#header-img {
position: relative;
top: -12px;
left: 5px;
}
#email {
overflow-x: auto !important;
overflow-y: auto !important;
margin: 20px;
width: 500px;
height: 32px;
border: 1px solid black;
border-radius: 5px;
font-family: quicksand;
font-size: 20px;
}
#email-div {
margin: 20px;
text-align: center;
}
#email-label {
font-family: quicksand;
font-size: 20px;
}
#g-btn {
width: 150px;
height: 30px;
background-color: rgb(255, 194, 81);
font-family: quicksand;
font-size: 18px;
border: none;
border-radius: 5px;
}
#g-btn:hover {
animation-name: button-animation;
animation-duration: 1s;
animation-fill-mode: forwards;
}
#keyframes button-animation {
100% {
background-color: rgb(255, 216, 143);
}
}
#nav-links {
position: relative;
left: 1050px;
top: -123px;
display: flex;
flex-direction: column;
}
#nav-links li {
display: inline;
font-family: quicksand;
font-size: 20px;
}
#nav-links a {
color: white;
text-decoration: none;
word-spacing: 5px;
}
#features {
text-align: center;
}
.features-text {
font-family: quicksand;
font-size: 25px;
display: flex;
flex-direction: row;
justify-content: center;
position: relative;
left: 60px;
top: -35px;
}
#padlock {
position: relative;
top: 35px;
left: -400px;
}
#padlock-text {
top: -90px;
}
#p-header {
position: relative;
top: -60px;
left: -235px;
}
#location {
position: relative;
left: -400px;
top: -10px;
}
#location-text {
position: relative;
top: -145px;
left: 80px;
}
#l-header {
position: relative;
top: -120px;
left: -200px;
}
#mobile {
position: relative;
left: -400px;
top: -65px;
}
#mobile-text {
position: relative;
top: -200px;
left: 160px;
}
#m-header {
position: relative;
top: -185px;
left: -230px;
}
.header-text {
font-family: quicksand;
font-size: 30px;
}
#video {
display: flex;
justify-content: center;
position: relative;
top: -150px;
}
/* Start Of Danger Zone */
.product {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
border: 1px solid black;
border-radius: 5px;
width: 350px;
font-family: quicksand;
margin: 10px;
background-color: white;
overflow-x: hidden !important;
overflow-y: hidden !important;
}
.product li {
list-style: none;
}
.product > .level {
background-color: #ddd;
color: black;
padding: 15px 0;
width: 100%;
border-radius: 5px;
text-transform: uppercase;
font-weight: bolder;
}
.button {
width: 100px;
height: 30px;
background-color: rgb(252, 189, 17);
border: none;
border-radius: 5px;
margin: 10px;
font-family: quicksand;
color: white;
font-size: 20px;
position: relative;
top: -15px;
}
.price {
font-size: 30px;
margin: 10px;
}
.perks {
position: relative;
top: -15px;
}
#paid-monthly {
position: relative;
left: 380px;
top: -282px;
}
#yearly-paid {
position: relative;
left: 759px;
top: -565px;
}
/* End Of Danger Zone*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FCC: VPN Product Landing Page</title>
<link href="https://fonts.googleapis.com/css2?family=Quicksand&display=swap" rel="stylesheet">
<link rel="stylesheet" href="fccplpstylesheet.css">
</head>
<body>
<div id="main">
<div id="header-div">
<nav id="nav-bar">
<img id="header-img" src="project Images/vpn.jpeg" width="100px" alt="company logo">
<div id="header">Prive9000 VPN Service</div>
<div id="nav-links">
<ul>
<li> Features <span class="middot"> ·</span> </li>
<li> Pricing <span class="middot"> ·</span> </li>
<li> Mobile App </li>
</ul>
</div>
</nav>
</div>
<div id="email-div">
<form action="https://www.freecodecamp.org/email-submit)." id="email-form">
<label for="email" id="email-label"> Please Enter Your Email: <br>
<input id="email" type="email" placeholder=" Enter Your Email" required> <br>
</label>
<button type="submit" id="g-btn">GET STARTED</button>
</form>
</div>
<div id="features">
<img id="padlock" src="Project Images/padlock-key.jpeg" width="100px" height="95px" alt="padlock">
<h2 class="header-text" id="p-header">Privacy Ensured</h2>
<p class="features-text" id="padlock-text">Your Information Is Safe With Us; Privacy Will Never Be A Worry Again</p>
<img id="location" src="Project Images/place-localizer.jpeg" width="100px" height="95px" alt="location-pointer">
<h2 class="header-text" id="l-header">Change Your Location</h2>
<p class="features-text" id="location-text">Change Your Country Whenever You Want!; Connect To Over 190+ Countries</p>
<img id="mobile" src="Project Images/built-mobile.jpeg" width="100px" height="95px" alt="mobile-graphic">
<h2 class="header-text" id="m-header">For All Platforms</h2>
<p class="features-text" id="mobile-text">Apps Built For Both Android And iOS Aswell; Stay Safe No Matter What Platform Your On</p>
</div>
<div id="video">
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/XP4rSoBS_iw" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<!--Start Of Danger Zone-->
<div id="prices">
<div class="product" id="free">
<div class="level">Free Plan</div>
<div class="price">Free</div>
<ul class="perks">
<li>No Payments; 100% Free</li>
<li>Connect To Over 20+ Countries</li>
<li>Ads Included</li>
<li>Doesn't Allow Country Swap</li>
</ul>
<button class="button">Select</button>
</div>
<div class="product" id="paid-monthly">
<div class="level">Monthly Paid Plan</div>
<div class="price">$100</div>
<ul class="perks">
<li>$100 per Month</li>
<li>Connect To Over 100+ Countries</li>
<li>Ads Included</li>
<li>Allows Country Swap For Netflix Only</li>
</ul>
<button class="button">Select</button>
</div>
<div class="product" id="yearly-paid">
<div class="level">Yearly Paid Plan</div>
<div class="price">$800</div>
<ul class="perks">
<li>$800 per Year</li>
<li>Connect To ALL Countries</li>
<li>Ad Free</li>
<li>Allows Country Swap For All Platfroms</li>
</ul>
<button class="button">Select</button>
</div>
</div>
</div>
<!--End Of Danger Zone-->
</body>
</html>
body {
overflow-x: hidden;
overflow-y: auto;
background: linear-gradient(90deg, rgb(217, 217, 217, 0.85), rgb(255, 255, 255, 0.85)),url(https://i.pinimg.com/originals/5d/9d/dd/5d9dddca471960cd09ced9539ccb85d7.jpg);
}
#header {
font-family: quicksand;
font-size: 25px;
position: relative;
left: 105px;
top: -80px;
color: white;
}
#header-div {
width: 2000px;
height: 75px;
box-shadow: 5px 5px 8px rgb(128, 128, 128);
background-color: rgb(255, 202, 103);
position: relative;
top: -10px;
left: -10px;
}
#header-img {
position: relative;
top: -12px;
left: 5px;
}
#email {
overflow-x: auto !important;
overflow-y: auto !important;
margin: 20px;
width: 500px;
height: 32px;
border: 1px solid black;
border-radius: 5px;
font-family: quicksand;
font-size: 20px;
}
#email-div {
margin: 20px;
text-align: center;
}
#email-label {
font-family: quicksand;
font-size: 20px;
}
#g-btn {
width: 150px;
height: 30px;
background-color: rgb(255, 194, 81);
font-family: quicksand;
font-size: 18px;
border: none;
border-radius: 5px;
}
#g-btn:hover {
animation-name: button-animation;
animation-duration: 1s;
animation-fill-mode: forwards;
}
#keyframes button-animation {
100% {
background-color: rgb(255, 216, 143);
}
}
#nav-links {
position: relative;
left: 1050px;
top: -123px;
display: flex;
flex-direction: column;
}
#nav-links li {
display: inline;
font-family: quicksand;
font-size: 20px;
}
#nav-links a {
color: white;
text-decoration: none;
word-spacing: 5px;
}
#features {
text-align: center;
}
.features-text {
font-family: quicksand;
font-size: 25px;
display: flex;
flex-direction: row;
justify-content: center;
position: relative;
left: 60px;
top: -35px;
}
#padlock {
position: relative;
top: 35px;
left: -400px;
}
#padlock-text {
top: -90px;
}
#p-header {
position: relative;
top: -60px;
left: -235px;
}
#location {
position: relative;
left: -400px;
top: -10px;
}
#location-text {
position: relative;
top: -145px;
left: 80px;
}
#l-header {
position: relative;
top: -120px;
left: -200px;
}
#mobile {
position: relative;
left: -400px;
top: -65px;
}
#mobile-text {
position: relative;
top: -200px;
left: 160px;
}
#m-header {
position: relative;
top: -185px;
left: -230px;
}
.header-text {
font-family: quicksand;
font-size: 30px;
}
#video {
display: flex;
justify-content: center;
position: relative;
top: -150px;
}
/* Start Of Danger Zone */
.product {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
border: 1px solid black;
border-radius: 5px;
width: 350px;
font-family: quicksand;
margin: 10px;
background-color: white;
overflow-x: hidden !important;
overflow-y: hidden !important;
}
.product li {
list-style: none;
}
.product > .level {
background-color: #ddd;
color: black;
padding: 15px 0;
width: 100%;
border-radius: 5px;
text-transform: uppercase;
font-weight: bolder;
}
.button {
width: 100px;
height: 30px;
background-color: rgb(252, 189, 17);
border: none;
border-radius: 5px;
margin: 10px;
font-family: quicksand;
color: white;
font-size: 20px;
position: relative;
top: -15px;
}
.price {
font-size: 30px;
margin: 10px;
}
.perks {
position: relative;
top: -15px;
}
#paid-monthly {
position: absolute;
left: 380px;
top: 1285px;
}
#yearly-paid {
position: absolute;
left: 759px;
top: 1400px;
}
/* End Of Danger Zone*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FCC: VPN Product Landing Page</title>
<link href="https://fonts.googleapis.com/css2?family=Quicksand&display=swap" rel="stylesheet">
<link rel="stylesheet" href="fccplpstylesheet.css">
</head>
<body>
<div id="main">
<div id="header-div">
<nav id="nav-bar">
<img id="header-img" src="project Images/vpn.jpeg" width="100px" alt="company logo">
<div id="header">Prive9000 VPN Service</div>
<div id="nav-links">
<ul>
<li> Features <span class="middot"> ·</span> </li>
<li> Pricing <span class="middot"> ·</span> </li>
<li> Mobile App </li>
</ul>
</div>
</nav>
</div>
<div id="email-div">
<form action="https://www.freecodecamp.org/email-submit)." id="email-form">
<label for="email" id="email-label"> Please Enter Your Email: <br>
<input id="email" type="email" placeholder=" Enter Your Email" required> <br>
</label>
<button type="submit" id="g-btn">GET STARTED</button>
</form>
</div>
<div id="features">
<img id="padlock" src="Project Images/padlock-key.jpeg" width="100px" height="95px" alt="padlock">
<h2 class="header-text" id="p-header">Privacy Ensured</h2>
<p class="features-text" id="padlock-text">Your Information Is Safe With Us; Privacy Will Never Be A Worry Again</p>
<img id="location" src="Project Images/place-localizer.jpeg" width="100px" height="95px" alt="location-pointer">
<h2 class="header-text" id="l-header">Change Your Location</h2>
<p class="features-text" id="location-text">Change Your Country Whenever You Want!; Connect To Over 190+ Countries</p>
<img id="mobile" src="Project Images/built-mobile.jpeg" width="100px" height="95px" alt="mobile-graphic">
<h2 class="header-text" id="m-header">For All Platforms</h2>
<p class="features-text" id="mobile-text">Apps Built For Both Android And iOS Aswell; Stay Safe No Matter What Platform Your On</p>
</div>
<div id="video">
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/XP4rSoBS_iw" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<!--Start Of Danger Zone-->
<div id="prices">
<div class="product" id="free">
<div class="level">Free Plan</div>
<div class="price">Free</div>
<ul class="perks">
<li>No Payments; 100% Free</li>
<li>Connect To Over 20+ Countries</li>
<li>Ads Included</li>
<li>Doesn't Allow Country Swap</li>
</ul>
<button class="button">Select</button>
</div>
<div class="product" id="paid-monthly">
<div class="level">Monthly Paid Plan</div>
<div class="price">$100</div>
<ul class="perks">
<li>$100 per Month</li>
<li>Connect To Over 100+ Countries</li>
<li>Ads Included</li>
<li>Allows Country Swap For Netflix Only</li>
</ul>
<button class="button">Select</button>
</div>
<div class="product" id="yearly-paid">
<div class="level">Yearly Paid Plan</div>
<div class="price">$800</div>
<ul class="perks">
<li>$800 per Year</li>
<li>Connect To ALL Countries</li>
<li>Ad Free</li>
<li>Allows Country Swap For All Platfroms</li>
</ul>
<button class="button">Select</button>
</div>
</div>
</div>
<!--End Of Danger Zone-->
</body>
</html>