I Can't Verticaly Align An Element To Bottom

I'm trying to get my fullcalendar.io event to show up at the bottom of the day instead of in the middle. I've been trying to modify different elements to vertical-align: 'bottom' b

Solution 1:

The element which contains the table is held open by its content. Your vertical alignment is working but the element is only as tall as its content. Simply make sure the container is 100% high:

.fc-content-skeleton,
.fc-content-skeleton table {height:100%;}

https://jsfiddle.net/4v65ggos/9/

Solution 2:

Two issues:

1) the containing element isn't 100% of the "cell" height (which is set by a second "skeleton" table)

2) the vertical-align is overriden, so we'll need to increase specificity

Here's the CSS that will set the height to 100%:

.fc-row .fc-content-skeleton {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.fc-content-skeleton table {
    height: 100%
}

And finally, to increase specificity:

.fc-content-skeleton .fc-event-container {
    vertical-align: bottom;
}

(Or, we could add !important)

An updated fiddle: https://jsfiddle.net/4v65ggos/13/

Solution 3:

You can set a fixed height to the table element.

   .fc-row  table{ 
      height:72px;
    }

This though won't work well if the site you are working on it's responsive.

Make sure you apply height:100% to both elements, the table and its container.

.fc-content-skeleton,.fc-content-skeleton table{
   height:100%;
}

Solution 4:

You need to set the same height for the fc-content-skeleton as the fc-bg (you can set it to 64px as the background one just to try). The same for the table inside the fc-content-skeleton (or height: 100%).

Then the fc-event-container can use vertical-align: bottom you wanted to use.

In order to use this property, the parent must have a non-automatic height.