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;
}

user_13573444 · Answer

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%;
}

Solution with flex and absolute positioning.

The absolute in this solution is an additional parent block, with a class of .absolute, as well as a flexible rule that sets the indentation by the gap rule.

#blabla {
  position: relative;
}

.absolute {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  gap: 30px;
}

#columnL {
  width: 412px;
  height: 705px;
}

#columnM {
  width: 412px;
  height: 705px;
}

#columnR {
  width: 412px;
  height: 705px;
}

img {
  width: 100%;
}

horizontal center div's with a absolute position

1 Answers