The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Position item at bottom of div

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #245632

    I’ve tried doing this with Flexbox but I can’t seem to get it to work. Maybe I need to wrap everything that isn’t to be position to the bottom of it’s container in a div? …but I’d rather not do that if it can be avoided.

    Here’s my CodePen example:

    Note: I’ve just set flex-end so you can see which item I’m trying to position to the bottom of the div. It’s should be aligned to the left like the rest of the text really.

    I’ve also set a height on the table as well as background colours on the 2 columns just to prove/show that the div grows in height when the content is uneven so Flexbox is working.

    Would I need to make the .progress div fill the rest of the available space? I was hoping to avoid this and just have the last line of text independently positioned to the very bottom of the div. Though I understand if that’s not possible!

    Thanks, hope someone can help!


    Try margin-top: auto;

    .icon--info {
      /* stuff */
      margin-top: auto;

    Try this

    margin-top: auto;

    It may work


    Thanks @Atelierbram and @ZachDonald, that looks like it did the trick!

    Cool little trick, I was thinking it had to be some sort of ‘flex’ related declaration. That’s going to come in handy!

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.