Html - How to place two divs with an absolute position next to eachother?

vlone
May 5, 2023
337 views
0 votes
2 Answers

I cannot place two <div>s next to each other because they overlap. I want to have two divs with a separator in the middle of them.

html, body {
  max-width: 100%;
  overflow-x: hidden;
  margin: 0;
  background-color: #333;
  color: white;
}


#games {
  position: absolute;
}

@keyframes rotate {
    100% {
        transform: rotate(1turn);
    }
}

.game-card, .game-hub-card, .game-card::before, .game-hub-card::before, .game-card::after, .game-hub-card::after {
  box-sizing: border-box;
}

.game-card, .game-hub-card {
    z-index: 0;
    position: absolute;
    width: 300px;
    height: 200px;
    border-radius: 10px;
    overflow: hidden;
    padding: 2rem;
        background-color: #000;
    background-repeat: no-repeat;
    background-position: 0 0;
}

.game-card:hover, .game-hub-card:hover {
    &::before {
        position: absolute;
        content: '';
        z-index: -2;
        left: -50%;
        top: -50%;
        width: 200px;
        height: 200px;
        background-color: #000;
        background-repeat: no-repeat;
        background-position: 0 0;
        background-image: conic-gradient(transparent, purple, transparent 30%);
        animation: rotate 4s linear infinite;
    }
    
    &::after {
        position: absolute;
        content: '';
        z-index: -1;
        left: 6px;
        top: 6px;
        width: calc(100% - 12px);
        height: calc(100% - 12px);
        background: #000;
        border-radius: 5px;
    }
}

.game-list {
  padding-right: 5px;
  border-right: 1px solid black;
}

.game-hub-list {
  
}

.game-list, .game-hub-list {
  display: inline-block;
}

<div class="page" id="games">
  <div class="game-list">
    <h3>Games</h3>
    <div class="game-card">
      <img class="game-card-img" src="" alt="Game Icon"></img>
      <h4 class="game-card-title">Coming soon</h4>
      <p class="game-card-description">Lorem Ipsum</p>
    </div>
  </div>
  <div class="game-type-seperator">
  </div>
  <div class="game-hub-list">
    <h3>Game Hubs</h3>
    <div class="game-hub-card">
      <img class="game-hub-card-img" src="" alt="Game Hub Icon"></img>
      <h4 class="game-hub-card-title">Coming soon</h4>
      <p class="game-hub-card-description">Lorem Ipsum</p>
    </div>
  </div>
</div>

I tried display: inline-block but that is the issue, and the div’s positions HAVE to be absolute.‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌

Tags: css html

Answers

I mean this is just an awkward way of doing this, but if they really need to be positioned absolute then you need to either know and set the surrounding div’s width and calculate the width of the children + position them and/or just have the outer div full width and play with the width, top and left/right values of the children.

Ps. padding counts for the width of the element hence why the game-list and game-hub-list has the width 236px.

Hope this helps you in the right path!

html,
body {
  max-width: 100%;
  overflow-x: hidden;
  margin: 0;
  background-color: #333;
  color: white;
}

#games {
  position: absolute;
}

@keyframes rotate {
  100% {
    transform: rotate(1turn);
  }
}

.game-card,
.game-hub-card,
.game-card::before,
.game-hub-card::before,
.game-card::after,
.game-hub-card::after {
  box-sizing: border-box;
}

.page {
  width: 600px; /* child divs are 300px in width */
}

.game-list {
  z-index: 0;
  position: absolute;
  top: 0; /* positions the div vertically */
  left: 0; /* positions the div horizontally left, this could be in pixels as well ie. left: 50px */
  width: 236px;
  height: 200px;
  border-radius: 10px;
  overflow: hidden;
  padding: 2rem;
  background-color: #000;
  background-repeat: no-repeat;
  background-position: 0 0;
}

.game-hub-list {
  z-index: 0;
  position: absolute;
  top: 0; /* positions the div vertically */
  right: 0; /* positions the div horizontally right, this could be in pixels as well ie. left: 50px  */
  width: 236px;
  height: 200px;
  border-radius: 10px;
  overflow: hidden;
  padding: 2rem;
  background-color: #000;
  background-repeat: no-repeat;
  background-position: 0 0;
}

.game-card:hover,
.game-hub-card:hover {
  &::before {
    position: absolute;
    content: '';
    z-index: -2;
    left: -50%;
    top: -50%;
    width: 200px;
    height: 200px;
    background-color: #000;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-image: conic-gradient(transparent, purple, transparent 30%);
    animation: rotate 4s linear infinite;
  }
  &::after {
    position: absolute;
    content: '';
    z-index: -1;
    left: 6px;
    top: 6px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    background: #000;
    border-radius: 5px;
  }
}

<div class="page" id="games">
  <div class="game-list">
    <h3>Games</h3>
    <div class="game-card">
      <img class="game-card-img" src="" alt="Game Icon"></img>
      <h4 class="game-card-title">Coming soon</h4>
      <p class="game-card-description">Lorem Ipsum</p>
    </div>
  </div>
  <div class="game-hub-list">
    <h3>Game Hubs</h3>
    <div class="game-hub-card">
      <img class="game-hub-card-img" src="" alt="Game Hub Icon"></img>
      <h4 class="game-hub-card-title">Coming soon</h4>
      <p class="game-hub-card-description">Lorem Ipsum</p>
    </div>
  </div>
</div>

If an element is position: absolute, it will position itself to the closest positioned containing element which is #games. Since they both share the same container they are stacked on top of each other. Each card should have position: relative so that the position: absolute pseudo-elements ::before and ::after stay within the .card and card itself references it’s original position instead of #games. In the example below, the classNames have been consolidated into simpler forms and details are commented within the source. Also, the OP styles are SCSS and a compiler is needed to convert it into CSS. The example below is simple CSS.

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

html,
body {
  width: 100%;
  height: 100%;
  background: #333;
  color: white;
}

#games {
  display: flex /* Makes .menu position themselves in a row */;
  justify-content: center;
  width: max-content;
  min-height: 100%;
  padding: 10px;
}

.menu {
  min-width: max-content;
  margin: 0 10px;
}

@keyframes rotate {
  100% {
    transform: rotate(1turn);
  }
}

.card {
  position: relative /* Provides a separate reference for pseudo-elements */;
  z-index: 0;
  width: 300px;
  height: 200px;
  overflow: hidden;
  padding: 2rem;
  border-radius: 10px;
  background-color: #000;
  background-repeat: no-repeat;
  background-position: 0 0;
}

.card:hover::before {
  content: '';
  position: absolute;
  z-index: -2;
  left: -50%;
  top: -50%;
  width: 200px;
  height: 200px;
  background-color: #000;
  background-repeat: no-repeat;
  background-position: 0 0;
  background: conic-gradient(transparent, purple, transparent 30%);
  animation: rotate 4s linear infinite;
}

.card:hover::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 6px;
  top: 6px;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  background: #000;
  border-radius: 5px;
}

<main id="games" class="page">
  <section id="list" class="menu">
    <h3>Games</h3>
    <div class="card">
      <img class="icon" src="" alt="List Icon">
      <h4 class="title">Coming soon</h4>
      <p class="description">Lorem Ipsum</p>
    </div>
  </section>

  <section id="hub" class="menu">
    <h3>Hubs</h3>
    <div class="card">
      <img class="icon" src="" alt="Hub Icon">
      <h4 class="title">Coming soon</h4>
      <p class="description">Lorem Ipsum</p>
    </div>
  </section>
</main>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How to place two divs with an absolute position next to eachother?

Answers