html - Is there a way I can have 2 div elements on top of each other but not overlapping?

Question

What I want to do is make my sidebar cards be on the right and not the left. I've tried to use the display: grid; and that didn't work. I've tried to use the left: 0; and right: 0; in css. Nothing is working for me. My full code is at github.com.

Please ingnore the colors, I tried to draw it in google drawings so it's not good.

This is how it is:

And this is how I want it to look:

标签： htmlcss

Answer 1

你可以使用这样的网格。有关详细说明，请查看此处

*,
 :before,
 :after {
  box-sizing: border-box;
}

body {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 60% 40%;
  grid-template-areas: "header header" "content cards";
  width: 100%;
}

#header {
  grid-area: header;
}

#content {
  grid-area: content;
}

#cards {
  grid-area: cards;
}

<h3 id="header">Welcome to my GitHub Pages website this is where you can learn about me, find my games, and suggest ideas for anything!</h3>
<div id="content">
</div>
<div id="cards" class="cards">
  <div id="project1" class="project-card">
    <h1>
      Web Designer Tycoon
    </h1>
    <p>This is a idle tycoon like game where you have to make money by making web programs. People buy your web programs for money. If you get better at coding (in the game) then you will get more money for each program you make. Itis currently in the BETA
      stage and it will get released after lots of testing and a couple more changes. Thank you for your patience. <span onclick="window.location.href = 'https://codepen.io/hacker19374/project/full/Zyraey/'">Click me to go to Web Designer Tycoon</span></p>
  </div>
  <div id="project2" class="project-card">
    <h1>
      Burger Clicker
    </h1>
    <p>This game is a little bit different. It is a clicker game where you clic and click and click over and over to try to get the most money you can and you can use that money to buy</p>
  </div>
</div>