Div Block spreading across all columns of grid, no conforming to parent div block?

I’m trying to create a three column grid, with images behind a box with text and a opaque background so the image can be seen through the back ground.

The goal is to create a hover animation with the text div block eventually but I cannot get the div blocks to work properly.

I have a 1x3 grid, and within each column I have a div block, an image inside it, and I’m trying to create a second div block with my text to go over the image. but whenever I try to create this second div block it goes across all three columns, not just the one I put it in.

What am I doing wrong? Why isn’t the div block contained by its parent?

Here’s my read only link: https://preview.webflow.com/preview/ora-kura?utm_medium=preview_link&utm_source=designer&utm_content=ora-kura&preview=2ff5ac2c69cc3672daae44a18176f8c9&workflow=preview

Link to the idea of what we’re wanting (grid below the fold): https://www.wearepulse.com.au/

I’ve alos just realised that the first div block (the parent) has a height higher than that of the grid it is in, despite its height being 100%. what am I doing wrong I feel like I’ve tried everything!

Welcome to the Community @Micsim12 :wave:

When using absolute positioning, the element will look to the first parent which has a position that’s anything other than static. In your example you’d need to set the parent div (Div Block 12) to relative positioning—this should also fix any height issues :

As a side note, I’d suggest getting in the habit of renaming classes once they’re created rather than letting Webflow auto-name them (ex: Div Block 1, Div Block 2, etc). It’s easy to skip over initially when you’re trying to get functionality working, but it can help tremendously when trying to figure out bugs down the road :slight_smile:

Hopefully that helps, and don’t hesitate to reach out if you have any other questions!

I can’t believe it was that simple! Thank you so much for your help, it works great now!

1 Like