Aligning to the Top and Bottom of a Container Div

February 13, 2021

In my blog listing page, I wanted the blog image as a div background, with the heading aligned to the top of the div and the date and 'read more' button aligned to the bottom of the page.

This proved much easier to achieve than what I first thought. In Oxygen builder, set the Vertical Item Alignment of the containing div to be 'Space Between':

Ensure you have more than 2 child elements in the containing div, wrap individual elements in divs as necessary, add some margin and this is the end result:

A very simple way to ensure the top and bottom child elements are all aligned.

crossmenu
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram