Annoying gap for <div>

HTML-CSS
1

I am trying to place my

elements across the page with position: relative; For some reason, there is a gap that seperates my bottom
element from the rest of the page. An image is shown below of both the gap and the two other div elements shown at the top of the page along with the relevant code.

DISCLAIMER: I have had to zoom out the page to capture these shots

image
image1335×631 25.3 KB

image
image446×626 30.8 KB

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PIEQASITE</title>
	<link rel="stylesheet" href="PIEQACSS.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta name="description" content="Welcome to PIEQA, an organisation that is founded on teaching people the modern wonders of technology. This website is dedicated to teaching you about the modern controversies that arise with artificial intelligence. Our programmer (Aidan Hammond) has put a fair share of time into this and he hopes you enjoy this as much as we do. Learn as much as you can, this is a rapidly growing topic that could end up being a requirement for most industries to keep on top of (some mentioned on this site)." />
</head>
<body>
<header>
	<div class="PIEQAtitle">
	<h1 class="PIEQA" style="color:red;">P</h1>
	<h1 class="PIEQA" style="color:blue;">I</h1><h1 class="PIEQA" style="color:red;">E</h1><h1 class="PIEQA" style="color:red;">Q</h1>
	<h1 class="PIEQA" style="color:blue;">A</h1>
	</div>
	<h1 id="subheadingP3">Modern AI</h1>
	</header>
<div id="NavigationP2C"><!-- This contains the navigation system, the sole reason I have made a container for the container is for this one to be fixed whilst its child elements remain relative -->
<div id="NavigationP2">
<nav id="nav2">
<fieldset class="lineP2">
<a href="PIEQASiteP1.html"><p class="linkP2">Introduction</p></a>
</fieldset>
<br>
<br>
<fieldset class="lineP2">
<a href="PIEQASiteP2.html"><p class="linkP2" id="P2PP3">AI Past to Present</p></a>	
</fieldset>
<br>
<br>
<fieldset id="lineP2b">
<a href="PIEQASiteP4.html"><p class="linkP2" id="CP3">Conclusion</p></a>
</fieldset>
</nav>	
</div>
</div>
<fieldset class="FP3" id="F1P3"></fieldset>
<fieldset class="FP3" id="F2P3"></fieldset>
<fieldset class="FP3" id="F3P3"></fieldset>
<fieldset class="FP3" id="F4P4"></fieldset>
<div id="PIEQA-AD">
<!-- the reason that it this and #PIEQA-AD2 placed here instead of the beginning of the page is because it would take over some of the space of the first fieldset. Ruining the appearance of the page by creating small gaps at the top and bottom of the page (assuming I do not restyle all of the fieldsets, which would make them look tacky)-->
<h3 class="ADinfo"></h3>
</div>
<div id="PIEQA-AD2">
	<h3 class="ADinfo"></h3>
</div>
<div id="PIEQA-AD3">
	<h1 id="LOWMYST" class="ADinfo">Do you like youtubers? Do you like to laugh? Maybe you should watch LowMyst!</h1>
</div>
</body>
</html>

#subheadingP3{
	position: relative;
	left: 595px;
	bottom: 30px;
	font-size: 40px;
	font-family: Papyrus, fantasy;
	width: 380px;
}
#P2PP3{
	position: relative;
	bottom: 10px;
}
#CP3{
	position: relative;
	bottom: 15px;
}
.FP3{
	height: 650px;
	width: 650px;
	border-color: black;
	border-width: 5px;
	position: relative;
	left: 140px;
	bottom: 20px;
}
#F1P3{
	position: relative;
	left: 550px;
	background-image: url();
}
#F2P3{
	background-image: url();
}
#F3P3{
	position: relative;
	left: 550px;
	background-image: url();
}
#F4P4{
	background-image: url();
}
.ADinfo{
	color: white;
	font-family: Times new Roman, Times, serif;
}
#PIEQA-AD{
	background-color: blue;
	height: 250px;
	max-height: 10%;
	width: 105px;
	position: relative;
	bottom: 2720px;
	left: 1235px;
}
#PIEQA-AD2{
	background-color: blue;
	height: 250px;
	max-height: 10%;
	width: 105px;
	position: relative;
	bottom: 1620px;
	left: 1235px;
}
#PIEQA-AD3{
	height: 120px;
	width: 1360px;
	background-color: black;
	position: relative;
	top: 10px;
	right: 20px;
	max-height: 0%;
	overflow: none;
}
#LOWMYST{
	margin-left: 15px; /* Position Relative would have created a bar at the bottom of the viewport */
}
2

can you tell us what element is that?

3

What has created the gap I believe is when I placed

Elements and adjusted their height before moving them up the page

4

please format your code with backticks aroud it, otherwise if you write html tags those are rendered and make what you are writing unreadable

5

it was div elements that created the gap after I adjusted their height before moving them up the page

6

I guess, the issue is that bottom: 1620px. I guess you should review better what position: relative does to the elements

7

are there any alternative methods I can use to get the div element up to that part of the page?

8

sure, but it depends on what you want to obtain. you could use position: absolute or position: fixed (position: relative is the default you don’t really need to specify it), or use display: flex or display: grid on the parent element and organize your elements using that method

what is “that part of the page?”, where do you want the element?

9

I want the 2 blue div elements next to the 1st and 3rd fieldsets. I have already tried to fix the position, but it just removes the divs entirley from the page.

10

it doesn’t remove the divs from the page, you need to give them a width and height or some content

11

I have just tried setting its position to fixed, giving it a height and width and placing some content into it on the html doc. It is not on the page

12

it is on the page. maybe you need to also change the z-index, it can be covered by other elements

do you have a live version, like a codepen or replit for this?

13

I have noticed that making the position fixed works with the gap issue. However I need to gap gone as well as the div elements still on my page

14

I am afraid not. I will send you the source code though, bare in mind that the stylesheet is way bigger due to the fact that it is for multiple pages. The entire code is below

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PIEQASITE</title>
	<link rel="stylesheet" href="PIEQACSS.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta name="description" content="Welcome to PIEQA, an organisation that is founded on teaching people the modern wonders of technology. This website is dedicated to teaching you about the modern controversies that arise with artificial intelligence. Our programmer (Aidan Hammond) has put a fair share of time into this and he hopes you enjoy this as much as we do. Learn as much as you can, this is a rapidly growing topic that could end up being a requirement for most industries to keep on top of (some mentioned on this site)." />
</head>
<body>
<header>
	<div class="PIEQAtitle">
	<h1 class="PIEQA" style="color:red;">P</h1>
	<h1 class="PIEQA" style="color:blue;">I</h1><h1 class="PIEQA" style="color:red;">E</h1><h1 class="PIEQA" style="color:red;">Q</h1>
	<h1 class="PIEQA" style="color:blue;">A</h1>
	</div>
	<h1 id="subheadingP3">Modern AI</h1>
	</header>
<div id="NavigationP2C"><!-- This contains the navigation system, the sole reason I have made a container for the container is for this one to be fixed whilst its child elements remain relative -->
<div id="NavigationP2">
<nav id="nav2">
<fieldset class="lineP2">
<a href="PIEQASiteP1.html"><p class="linkP2">Introduction</p></a>
</fieldset>
<br>
<br>
<fieldset class="lineP2">
<a href="PIEQASiteP2.html"><p class="linkP2" id="P2PP3">AI Past to Present</p></a>	
</fieldset>
<br>
<br>
<fieldset id="lineP2b">
<a href="PIEQASiteP4.html"><p class="linkP2" id="CP3">Conclusion</p></a>
</fieldset>
</nav>	
</div>
</div>
<fieldset class="FP3" id="F1P3"></fieldset>
<fieldset class="FP3" id="F2P3"></fieldset>
<fieldset class="FP3" id="F3P3"></fieldset>
<fieldset class="FP3" id="F4P4"></fieldset>
<div id="PIEQA-AD">
<!-- the reason that it this and #PIEQA-AD2 placed here instead of the beginning of the page is because it would take over some of the space of the first fieldset. Ruining the appearance of the page by creating small gaps at the top and bottom of the page (assuming I do not restyle all of the fieldsets, which would make them look tacky)-->
<h3 class="ADinfo"></h3>
</div>
<div id="PIEQA-AD2">
	<h3 class="ADinfo"></h3>
</div>
<div id="PIEQA-AD3">
	<h1 class="LOWMYST">Do you like youtubers? Do you like to laugh? Maybe you should watch LowMyst!</h1>
    <p class="LOWMYST">If you are interested, please click on his channel logo!</p>
	<img src="" id="LOWMYSTIMG">
</div>
</body>
</html>

body{
	background-color: grey;
	/* THIS MUST BE STANDARDISED */
}
header{
	Background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTSla9Q1VUFgwmsyVzvg3B0WsxihLZ5KEsrdA&usqp=CAU");
	background-size: 1000px;
	height: 310px;
	z-index: 1;
	padding: none;
	border: none;
	position: relative;
	right: 7.7px;
	bottom: 20px;
	width: 1349px;
}
.PIEQA{
	font-family: droid-serif;
	font-size: 70px;
	font-weight: 20px;
	display: flex;
	align-items: center;
	position: sticky;
	right: 40px;
}
.PIEQAtitle{
 display: flex;
 float: center;
 margin-left: 570px;
 margin-bottom: 50px;
Background-color: white;
width: 225px;
}
#navigation{
	border: black, solid;
	background-color: white;
	height: 86px;
	width: 343px;
	max-width: 50%;
	display: flex;
	padding: none;
	position: relative;
	right: 7px;
}
#nav1{
	Display: flex;
	position: relative;
	right: 7px;
}
.line{
	border-color: black;
	border-width: 2px;
}
#L1{
	position: relative;
	left: 5px;
	width: 100px;
}
#L2{
	width: 110px;
	position: relative;
	right: 5px;
}
#main{
	/* Get a new background image that does not have a small tag underneath */
	Background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcShzYRQgcsIu1hHz5XFgIvZbsuNEbLFJPzmBg&usqp=CAU");
	background-size: 1500px;
	z-index: -1;
	height: 1000px;
	width: 1336.4px;
	position: relative;
	right: 25px;
	border-color: grey;
	display: grid;
}
.Info{
  border-raidus: 0, 0, 0, 0;
  height: 400px;
  width: 400px;
  background-color: grey;
  border-width: 0;
}
#TL{
	position: relative;
}
#TR{
	position: relative;
	bottom: 420px;
	left: 920px;
}
#BL{
	position: relative;
	bottom: 238px;
}
#BR{
	position: relative;
	bottom: 655px;
	left: 917.5px;
}
.sub{
	font-family: "monaco", monospace;
}
.P1info{
	font-family: sans-serif;
	font-size: 13.3px;
}
WIP{
	background-color: black;
}
WIPP{
	font-family: sans-serif;
	font-size: 17.3px;
}
/* Code for page 2 is shown below */
#subheadingP2{
	position: relative;
	left: 550px;
	bottom: 30px;
	font-size: 40px;
	font-family: Papyrus, fantasy;
	width: 380px;
}
.lineP2{
	border-color: black;
	border-width: 2px;
}
#NavigationP2C{
	position: fixed;
	z-index: 1;
}
#NavigationP2{
	background-color: black;
	position: relative;
	bottom: 319px;
	right: 8px;
	float: left;
	height: 300px;
	width: 150px;
}
#nav2{
	position: relative;
}
.lineP2{
	border-left: none;
	border-right: none;
	border-top: none;
	border-bottom-color: white;
	border-bottom-width: 8px;
	position: relative;
	bottom: 18;
	width: 123.5px;
}
#lineP2b{
	border: none;
    position: relative;
	bottom: 50px;
}
.linkP2{
	font-size: 25px;
}
#MAI2{
	position: relative;
	bottom: 15px;
}
#mainP2{
	/* Try to make this background color a gradient of blue and grey like aman suggested and then put it on your research log about how and why you made this change */
}
.subP2{
	background-color: white;
	height: 500px;
	width: 1201px;
	position: relative;
	left: 140px;
}
#sub1P2{
	background-image: linear-gradient(pink, grey);
	border: none;
	padding: none;
}
#sub2P2{
	background-image: linear-gradient(lime, grey);
	border: none;
	padding: none;
}
#sub3P2{
	background-image: linear-gradient(orange, grey);
    border: none;
	padding: none;
}
#sub4P2{
	background-image: linear-gradient(purple, grey);
    border: none;
	padding: none;
}
.contentP21{
	width: 300.25px;
	float: top;
	position: relative;
	left: 871px;
}
.contentP22{
	width: 300.25px;
	float: top;
	position: relative;
	right: 2px;
}
.TextAreaP2{
	display: grid;
	  grid-template-columns: minmax(250px, 600px) minmax(250px, 600px);
  row-gap: 32px;
  font-size: 13px;
  margin-left: 4px; /* this is just so it stays away from the <nav> no "position: relative;" is needed */
}
.TextAreaP2 p{
	font-family: sans-serif;
}
.TPPP2{
	position: relative;
	right: 617px;
	top: 47.5px;
}
#Akinator{
 height: 800px;
 max-width: 100%;
 position: relative;
 bottom: 665px;
 right: 100px;
 z-index: 2;
}
/*styling for Page 3 (Past to present) starts here */
#subheadingP3{
	position: relative;
	left: 595px;
	bottom: 30px;
	font-size: 40px;
	font-family: Papyrus, fantasy;
	width: 380px;
}
#P2PP3{
	position: relative;
	bottom: 10px;
}
#CP3{
	position: relative;
	bottom: 15px;
}
.FP3{
	height: 650px;
	width: 650px;
	border-color: black;
	border-width: 5px;
	position: relative;
	left: 140px;
	bottom: 20px;
}
#F1P3{
	position: relative;
	left: 550px;
	background-image: url();
}
#F2P3{
	background-image: url();
}
#F3P3{
	position: relative;
	left: 550px;
	background-image: url();
}
#F4P4{
	background-image: url();
}
#PIEQA-AD {
  background-color: blue;
  height: 250px;
  width: 105px;
  margin: none;
  position: relative;
  left: 1235px;
  bottom: 2800px;
}

#PIEQA-AD2 {
  background-color: blue;
  height: 250px;
  width: 105px;
  margin: none;
  position: relative;
  left: 1235px;
  bottom: 1660px;
}

#PIEQA-AD3 {
  height: 120px;
  width: 1350px;
  background-color: black;
  position: relative;
  right: 10px;
  top: 15px;
}
.LOWMYST {
 color: white;
 font-family: Times new Roman, Times, serif;
 margin-left: 5px;
 position: relative;
 top: 35px;
}
#LOWMYSTIMG{
	
}
15

that makes it a little challenging to help… at least a github repo?

16

I have got github, but not a repo. Apologies for this, I am not used to programming as much as you may be

17

Good luck with fixing this, I can’t help without having something to work with

18

can you not put into coding software?

19

that’s why I am asking for a github repo or codepen or replit or something

20

I will create a github repo and come back with a link