I want to make my website have it layout like this:

• top: home
• middle: projects
• bottom: contact

But the project div is not showing under the top home div. I tried to give them both the same background too. It's been hours and I can't figure this one out. What happens is that the home div is shown but the second div, which is supposed to be under it, is not shown.

#main {
  min-height: 500vh;
}

#home {
  background-image: url("https://rb.gy/r1vmga");
  background-size: cover;
  background-position: center;
  position: absolute;
  top: 0px;
  bottom: 0;
  left: 0;
  right: 0;
  color: white;
  font-family: "Helvetica Neue", Helvetica, Arial;
}

#title {
  font-size: 60px;
  position: absolute;
  top: 10%;
  left: 4%
}

#bio {
  font-size: 25px;
  text-align: center;
  position: absolute;
  top: 80%;
  left: 30%
}

#languages {
  font-size: 22px;
}

#main-social-icons {
  position: absolute;
  top: 79%;
  left: 43%
}

#projects {
  background-image: url("https://rb.gy/r1vmga");
  background-size: cover;
  background-position: bottom center;
  color: white;
  font-family: "Helvetica Neue", Helvetica, Arial;
}

<script src="https://kit.fontawesome.com/e65a647874.js" crossorigin="anonymous"></script>
<header id="header">
  <a  href="#home"><i ></i></a>
</header>
<main id="main">
  <div id="home">

    <h1 id="title">Hi,<br>I'm SmallPlayz.</h1>

    <div id="main-social-icons" >
      <a style="color: white;" href="https://www.youtube.com/SmallPlayz" target="_blank" title="SmallPlayz Youtube."><i ></i></a>
      <a style="color: white;" href="https://twitter.com/SmallPlayz_" target="_blank" title="SmallPlayz Twitter."><i  target="_blank"></i></a>
      <a style="color: white;" href="https://discord.gg/Bu65ZsTAww" target="_blank" title="SmallPlayz Discord."><i ></i></a>
      <a style="color: white;" href="https://github.com/SmallPlayz" target="_blank" title="SmallPlayz GitHub."><i ></i></a>
    </div>

    <h3 id="bio">I'm a highschool programmer who loves to code.<br><span id="languages"> Java, Python, JavaScript and more.</span></h3>

  </div>
  <div id="projects">

    <h2 id="projectsTitle">Projects I've worked on.</h2>

  </div>
</main>

CodePudding user response：

As suggested in the comments above, you should remove all references to position: absolute as they are not meant for properly laying out an entire page and its components.

divs have display:block as their default so they are a block element already (you can setup their width and height if you want but it's also strictly not needed)

See sample code below (simplified from your code)

#header {
  /* border: 1px solid red; */
}

#main {
  /* border: 1px solid green; */
  vertical-align: top;
  padding: 0;
}

#home {
  background-image: url("https://rb.gy/r1vmga");
  background-size: cover;
  background-position: top;
  color: white;
  font-family: "Helvetica Neue", Helvetica, Arial;
}

#title {
  font-size: 60px;
  margin: 0;
}

#bio {
  font-size: 25px;
  text-align: center;
  margin: 0;
}

#languages {
  font-size: 22px;
}

#main-social-icons {
  text-align: center;
}

#projects {
  border: 1px solid transparent;
  background-image: url("https://rb.gy/r1vmga");
  background-size: cover;
  background-position: bottom center;
  color: white;
  font-family: "Helvetica Neue", Helvetica, Arial;
}

<script src="https://kit.fontawesome.com/e65a647874.js" crossorigin="anonymous"></script>
<header id="header">
  <a  href="#home"><i ></i></a>
</header>
<main id="main">
  <div id="home">
    <h1 id="title">Hi,<br>I'm SmallPlayz.</h1>

    <div id="main-social-icons" >
      <a style="color: white;" href="https://www.youtube.com/SmallPlayz" target="_blank" title="SmallPlayz Youtube."><i ></i></a>
      <a style="color: white;" href="https://twitter.com/SmallPlayz_" target="_blank" title="SmallPlayz Twitter."><i  target="_blank"></i></a>
      <a style="color: white;" href="https://discord.gg/Bu65ZsTAww" target="_blank" title="SmallPlayz Discord."><i ></i></a>
      <a style="color: white;" href="https://github.com/SmallPlayz" target="_blank" title="SmallPlayz GitHub."><i ></i></a>
    </div>

    <h3 id="bio">I'm a highschool programmer who loves to code.<br><span id="languages"> Java, Python, JavaScript and more.</span></h3>

  </div>
  <div id="projects">

    <h2 id="projectsTitle">Projects I've worked on.</h2>

    <ul>
      <li>one</li>
      <li>two</li>
      <li>three</li>
    </ul>

  </div>
  <div id="contacts">
    <p> my contact info here </p>
  </div>
</main>