Streaming live at 10am (PST)

Flex, equal columns and align to bottom


#1

I've made some columns which all stretch to match the tallest's height but elements inside them which are set to align to the bottom of the container only do so on the tallest column (see "add to compare below). The others retain the bottom aligned element where it would've been before the columns were equalized. Any solutions to this?


#2

ok resolved, by making all positions involved relative


#3

Hey @Mowgli,

To make an element always stick to the bottom of its parent, you can use the usual flexbox "sticky footer" technique:

  1. Set the parent element to Display: Flex and Direction: Column
  2. Nest 2 children divs: one for main content and one for the footer
  3. Set the main content element's flex child settings to Sizing: Fill empty space. This setting will push the second element to the bottom of parent container no matter how much content it has.

Here's a basic visual explanation, hope this helps:


#4

It's a great thing that we can make this work so easily, just one question though: by using this method, are you suggesting to avoid using sections altogether? And if so, there's no implications in terms of SEO and layout/grid settings? Many thanks


#5

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.