0

I have a div (top-container) and inside it I have 3 children images. I set the position property of the div (top-container) to relative. All the 3 children have the position property are set to absolute. The question is that the height of the div (top-container) doesn't change with the botton-cloud image. It seems that the botton-cloud image is not its children.

What is wrong?

div {
  background-color: #E4F9F5;
}

body {
  margin: 0px;
  text-align: center;
}

h1 {
  margin-top: 0px;
}

.top-container {
  background-color: #E4F9F5;
  position: relative;
  padding-top: 100px;
}

.middle-container {
  background-color: aqua;
  height: 200px;
  width: 200px;
}

.botton-container {
  background-color: blueviolet;
  height: 200px;
  width: 200px;
}

.pro {
  text-decoration: underline;
}

.middle-cloud {
  position: absolute;
}

.top-cloud {
  position: absolute;
  right: 450px;
  top: 50px;
}

.botton-cloud {
  position: absolute;
}
<div class="top-container">
  <img class="top-cloud" src="images/cloud.png" alt="cloud-img" />
  <h1>I'm Eduardo</h1>
  <p>a <span class="pro">pro</span>grammer</p>
  <img class="middle-cloud" src="images/cloud.png" alt="cloud-img" />
  <img class="botton-cloud" src="images/mountain.png" alt="mountain-img" />
</div>
<div class="middle-container">
</div>
<div class="botton-container">

</div>

Thanks in advance

I was expecting that the botton of the div (top-container) pushes down the other two containers: "middle-container" and "botton-container".

Pete
  • 57,112
  • 28
  • 117
  • 166
Eduardo Falcão
  • 1
  • `absolute` positioned elements are removed from the normal document flow. They therefore have a height + width on their own, but don't contribute to their parent's size. So depending on what you want to acchieve, you might have to change your aproach – Alex Berger Mar 22 '23 at 10:40
  • Your expectations are incorrect, absolute position is absolute, you need relative position for things to appear relative to each other. Absolute (and float) are out of flow and you're asking for them to be in flow. – Separatrix Mar 22 '23 at 10:58

0 Answers0