Div disappears when height is a percentage or auto

css, html

Solution

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.

Problem

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!

Original source