How do I make a div block's position relate to a fixed block (positioned at the top) that changes height depending on amount of text in it?

Hi!

I’m creating my own online portfolio where I present different projects. In all views except cpu, I want the project text above the images. The text is on top of a grey block, and these are fixed, so the scrollable images can scroll underneath the text / grey block. This way you can always read the text while you scroll and look at all the images. And so far have I managed. :slight_smile: You can see all this in the link below.

The problem I’m facing is that I want the top image to align with the bottom part of the grey block (which grows vertically depending on length of text), when you come to the page, and I can’t find a way to make the top image’s position relate to the dynamic grey block.

Does this make sense? Sometimes it’s so hard to explain :slight_smile:

All the best,
Mateas


Here is my site Read-Only: [LINK](Webflow - C.A. Mateas Pares)
(how to share your site Read-Only link)

You can try using JavaScript to dynamically set the margin or position of the top image based on the height of the grey block. Essentially, you’d calculate the height of the text block after the page loads or when it changes, and then adjust the image’s position accordingly.

The idea is to write a script that automatically updates the top margin or position of your image whenever the height of the grey block changes. This can ensure that the top image always aligns with the bottom of the grey block, regardless of how much text it contains.

The code might look something like that:

function adjustImagePosition() {
  var greyBlockHeight = document.getElementById('greyBlock').offsetHeight;
  document.getElementById('topImage').style.marginTop = greyBlockHeight + 'px';
}

// Initial adjustment
adjustImagePosition();

// Adjust on window resize
window.addEventListener('resize', adjustImagePosition);

// If the grey block content changes dynamically, you'll need to call adjustImagePosition() accordingly

But again, it’s just an example and you might need to change it a bit.

Good luck!

Thanks! Where do I paste this code? :slight_smile: And do I need to change any classes somewhere?

I solved it! And without code! I basically used a grid for both text and images, and set the text block as Sticky and the images as Static. Didn’t think you could use different position properties in the same grid, and never used Sticky before. Please have a look and see if you like it :slight_smile:

Wow, well done! Using sticky for text and static for images is a clever fix. Just checked out your site – it looks fantastic. The scrollable images under fixed text add a really cool, professional touch. Love how you tackled this without needing any code. It’s a neat example of creative problem-solving with CSS.

Cheers!

Thanks so much! :smiling_face_with_three_hearts: . . . . . . . . . . . . . . . . . . . . . . . . . . .

1 Like