Position absolute divs next to each other in list

Question

Is there any way of having a list of divs display inline next to each other when they're positioned absolutely?

I don't have control over the markup in my situation, and the divs need to all sit outside of their grid container, hence the position:absolute. In the example below, I would like the 'outside divs' to all sit next to each other.

.container {
  max-width:600px;
  margin: 20px auto;
  position:relative;
}

.grid {
  display:grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 1.5rem;
}

.col {
  background:pink;
  padding:15px
}

.outside-div {
  position:absolute;
  bottom:-30px;
  left:0;
}

<div class="container">
  <div class="grid">
    <div class="col">
      <div>Other content</div>
      <div class="outside-div">Outside div one</div>
    </div>
    <div class="col">
      <div>Other content</div>
      <div class="outside-div">Outside div two</div>
      <div class="outside-div">Outside div three</div>
    </div>
  </div>
 </div>

I think your problem is already solve [here.](https://stackoverflow.com/questions/446060/css-two-divs-next-to-each-other) — Newbee, Mar 14 '23 at 22:55

score 0 · Answer 1 · answered Mar 14 '23 at 23:02

.container {
  max-width: 600px;
  margin: 20px auto;
  position: relative;
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

.col {
  background: pink;
  padding: 15px
}

.outside-div {
  position: absolute;
  bottom: -30px;
  left: 0;
}

.row {
  display: flex
}

<div class="container">
  <div class="grid">
<div class="col" style="position: relative;">
  <div>Other content</div>
  <div class="outside-div row">
    <div>Outside div one</div>
  </div>
</div>
<div class="col" style="position: relative;">
  <div>Other content</div>
  <div class="outside-div row">
    <div>Outside div two</div>
    <div>Outside div three</div>
  </div>
</div>
  </div>
</div>

Position absolute divs next to each other in list

1 Answers1