Div height doesn't link to the content inside

Hey guys!

Another day, another (maybe totally basic) problem. :slight_smile:

The status quo:
I want to create a card design with 3 columns for the desktop (2 for tablet and phone) landscape with a hover effect. Like you can see in my testarea (Link below) I already got the design with me hover effect. The adjustment for tablet and phone are negligible in this case.

The problem:
Like you can see in my example, the following section extend into the card section. The problem ist the Div Block 7 which doesn’t get the height of the card inside himself. The height should be flexible, according to the height of the card.

I already tried different (and partly complicated) things, but I think the solution will be easy and very basic…but I don’t get it.

PS: A little addition - In best case I would like to do it with flexbox grid to get the card height equal for every card according to the highest card.


Here is my public share link: Testarea

Hi @mjerxsen,

I don’t really understand what you are trying to do here. Can you post an image?
Having your classes named Div Block 5,6,7,8,9 doesn’t help either to quickly understand what you are doing there. Maybe someone else will understand.

Best,
Karl-Heinrich

Hi, @Karl-Heinrich!

I named the Div Blocks with their main tasks and updated the testarea to make it a bit clearer.
Unfortunately, I don’t have an example.

The main question is: Why don’t the “Position Relative Div” got no height?

If the div (Position Relative) has no height the following section (“footer section” in this case) extends into the card design. To be clear: Background behind the cards should be white.
Definitely, I can fix that with a big margin like in the “example #2”, but in this case it is a fix value instead of being responsive to the height.

I hope my problem is now a little clearer. :worried:

Greetings,
Michael

PS: Maybe this helps, too.

HI @mjerxsen ,

So you have empty divs and no height assigned and wonder why they don’t show up?
This is like saying, why is my pen not working, I am holding it! Well you need to press the top, too.
What do you need these divs for?

Delete them. Or give them a height. Or put content into them.

Best,
Karl-Heinrich

:grinning: Man are you kidding me?

Did you looked into the preview page? These divs got content - have a look:

So, don’t be mad, but is there any possibility to get a well founded response to my problem without be seen as stupid? I’m no coder, but I want to understand. Thanks in advance.

Greetings

Hi @mjerxsen,

now I get it. Well the root of all your problems is the way you created your effect. Why do you need duplicate content?

No need. Look.
Recreate it the way I did it and you should be fine.
Read-only

For you to understand, set your Normal Status and Border Hover to display static.

Best,
Karl-Heinrich

1 Like

Thanks for the example and solution! Now it works fine. :slight_smile: :+1:

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.