Position div depending on the height of another div

Question

I have a <div> (let's call it "image") that contains some images <img><img><img> and so on. This div's width is set at 100% of the screen, and the images inside rescale depending on the width. So, depending on the browser's width, the height of my div changes.

Now I would like to create another div (let's call it "after_image") that starts after this image, without using "relative", but by retrieving the height of <div id="image"> , and using that as a "top: px" attribute.

Is it possible? Maybe a <script> ? (I am using PHP)

Answer 1

Try this :

<div id='image'>
  <img src='' />
  <img src='' />
  <img src='' />
</div>
<div id='after_image'></div>

<script>
  var h = document.getElementById('image').clientHeight // returns height as number
  document.getElementById('after_image').style.top = h + 'px'
</script>

Answer 2

Here is how you can achieve what you want, although this is the wrong approach in my opinion.

 const image = document.querySelector('#image'), after = document.querySelector('#after_image') after.style.top = image.getBoundingClientRect().bottom + 'px' 

 #image { width: 200px; height: 2750px; box-sizing: border-box; border: solid blue 3px; background: skyblue; } #after_image { width: 200px; height: 500px; position: absolute; box-sizing: border-box; border: solid orangered 3px; background: pink; } 

 <div id='image'> <img src='' /> </div> <div id='after_image'></div> 

If you really want to do it this way, it is best to bind your JS statement to the resize event.

window.addEventListener('resize', function(){
  after.style.top = image.getBoundingClientRect().bottom + 'px'
}