CODEWITHSUNDEEP
htmlcss
TheLeonKing
TheLeonKing

Reputation: 3601

Div disappears when height is a percentage or auto

I have a strange problem. I've created some tiles with CSS, as can be seen in the example below, and it all works well when I set the tile's div height and width in pixels.

However, when I set the div height as a percentage (or to auto, as I would like), the div disappears. I can set the width to a percentage without a problem.

The problem can be seen in this CodePen.

P.S. I would like to solve this problem without any Javascript or JQuery :-)

Many thanks!

Upvotes: 3

Views: 5719

Answers (1)

pschueller
pschueller

Reputation: 4427

All of the elements inside of your tile divs are positioned absolutely which removes them from the flow of your document and makes the tile div height 0 (see w3schools).

Remove position: absolute; from one of your containing elements (in your case probably the caption) and have it display: block;.

Here a working fork.

Upvotes: 4

Related Questions