Search code examples
htmlcssgridalignment

Vertically align content inside a grid of div tags


Im making a grid with div tags to put different types of content in there like pictures, text, headings, buttons etc. I tried atleast 3 different ways to make a grid and now i finally found the best way for me. The grid now is looking good and works perfect, however i have 1 problem, i cannot align 1 text to the bottom.

Now for my question:

How do i align the call-to-action text at the bottom of the div while keeping the rest of the content at the top. I would like to be able to do this by just adding some rules instead of taking a whole different approach by building the grid.

The part that should be aligned at the bottom is called "Bekijk dit artikel".

All suggestions are very welcome!


Solution

  • Use positioning here.

    .blok3-a {position: relative;}
    .text-container-link {position: absolute; left: 0; bottom: 0;}
    

    http://jsfiddle.net/AL6Qn/2/

    If you don´t know height of content above, there is no other way using your HTML and align text only with CSS.