html - horizontal center div's with a absolute position

Question

I have 3 divs inside a section. The divs position is absolute because I want a really small gap between the 3 divs, but when I want to horizontal the divs nothing happens. What should I do?

#columnL {
  width: 412px;
  height: 705px;
  position: absolute;
  left: 0;
}

#columnM {
  width: 412px;
  height: 705px;
  right: 0;
  left: 0;
  position: absolute;
}

#columnR {
  width: 412px;
  height: 705px;
  position: absolute;
  right: 0;
}

<section id="blabla">
  <div id="columnL">
    <div id="afbeeldingL">
      <img src="https://www.spiralex.nl/wp-content/uploads/2021/01/110-14018-b-Petronas-V2017.jpg">
    </div>
    <div id="tekstL">
      <h1 id="hoofdstuk1">TEXT</h1>
    </div>
  </div>
  <div id="columnM">
    <div id="afbeeldingL">
      <img src="https://www.spiralex.nl/wp-content/uploads/2021/01/110-14018-b-Petronas-V2017.jpg">
    </div>
    <div id="tekstL">
      <h1 id="hoofdstuk1">TEXT</h1>
    </div>
  </div>
  <div id="columnR">
    <div id="afbeeldingL">
      <img src="https://www.spiralex.nl/wp-content/uploads/2021/01/110-14018-b-Petronas-V2017.jpg">
    </div>
    <div id="tekstL">
      <h1 id="hoofdstuk1">TEXT</h1>
    </div>
  </div>
</section>

question from:https://stackoverflow.com/questions/65921600/horizontal-center-divs-with-a-absolute-position

Answer 1

Make a parent div with a relative positioning rule. Like this:

#blabla {
  position: relative;
}

Indicate the margin: auto for each card - #columnL, #columnM and #columnR.

And push the width: 100% for the img tag. Like this:

img {
  width: 100%;
}

But why do you need absolute positioning?

#blabla {
  position: relative;
}

#columnL {
  width: 412px;
  height: 705px;
  position: absolute;
  left: 0;
  margin: auto;
}

#columnM {
  width: 412px;
  height: 705px;
  right: 0;
  left: 0;
  position: absolute;
  margin: auto;
}

#columnR {
  width: 412px;
  height: 705px;
  position: absolute;
  right: 0;
  margin: auto;
}

img {
  width: 100%;
}

<section id="blabla">
  <div id="columnL">
    <div id="afbeeldingL">
      <img src="https://www.spiralex.nl/wp-content/uploads/2021/01/110-14018-b-Petronas-V2017.jpg">
    </div>
    <div id="tekstL">
      <h1 id="hoofdstuk1">TEXT</h1>
    </div>
  </div>
  <div id="columnM">
    <div id="afbeeldingL">
      <img src="https://www.spiralex.nl/wp-content/uploads/2021/01/110-14018-b-Petronas-V2017.jpg">
    </div>
    <div id="tekstL">
      <h1 id="hoofdstuk1">TEXT</h1>
    </div>
  </div>
  <div id="columnR">
    <div id="afbeeldingL">
      <img src="https://www.spiralex.nl/wp-content/uploads/2021/01/110-14018-b-Petronas-V2017.jpg">
    </div>
    <div id="tekstL">
      <h1 id="hoofdstuk1">TEXT</h1>
    </div>
  </div>
</section>