Preventing text to overlap

user_13025121 0
Viewed 55

Below is my code, my goal is to prevent the div with an id "description" to overlap on the div with class name "container_display". How can I achieve this? I want the second div to show at the bottom of the image.

#container_display {
    position: relative;
}

#container_display img {
    position: absolute;
    top: 0;
    left: 0;
}
<div id="container_display">
    <img src="image1.png" />
    <img src="image2.png" />
</div>

<div id="description">TEXT HERE</div>

css html
2 Answers

You need to set a height for the container, because the absolutely positioned elements are not considered to occupy width or height in the container.

Details on MDN:

absolute

The element is removed from the normal document flow, and no space is created for the element in the page layout

#container_display {
  position: relative;
  height: 60px;
}

#container_display img {
  position: absolute;
  top: 0;
  left: 0;
  height: 60px;
}
<div id="container_display">
  <img src="https://i.ibb.co/KzWG55K/Pokemon-PNG-Image.png" />
  <img src="https://i.ibb.co/x8r33KL/Pokemon-Free-Download-PNG-1.png" />
</div>

<div id="description">TEXT HERE</div>

There is one way to "hack it", which is to place one static image there and make it visibility: hidden, which is to occupy space, but not visible, and the position back to static:

#container_display {
  position: relative;
}

#container_display img {
  position: absolute;
  top: 0;
  left: 0;
  height: 60px;
}

#container_display .spacer {
  visibility: hidden;
  position: static;
}
<div id="container_display">
  <img src="https://i.ibb.co/KzWG55K/Pokemon-PNG-Image.png" />
  <img src="https://i.ibb.co/x8r33KL/Pokemon-Free-Download-PNG-1.png" />
  <img class="spacer" src="https://i.ibb.co/x8r33KL/Pokemon-Free-Download-PNG-1.png" />
</div>

<div id="description">TEXT HERE</div>

user_130229010

You don't need this:

#container_display img {
    position: absolute;
    top: 0;
    left: 0;
}

You could also add a break between both divs to create space between them, like this: 

<div id="container_display">
<img src="image1.png" />
<img src="image2.png" />
</div> 
<br>
<div id="description">TEXT HERE</div>
user_130139790
Related