Forums

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

Home Forums CSS basic CSS column button alignment question

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #196798
    canvanoo
    Participant

    Hello all,

    I’m a beginner with CSS and I am trying to bottom align a “read more” button at the bottom of 4 columns, where the text in the 4 columns has different lenghts. I’d share my code, only, I think it’s too full of mistakes.

    I would really appreciate any help.

    Thank you,

    #196821
    sevensixfive
    Participant

    If I were to try it, I would absolute position the button to be close to the bottom of the column. That would create a potential problem where, if there is too much content in the column, text could flow down and collide with the button. To fix that I would put enough padding on the bottom of the container of the text so any additional text would force the column to go longer before it ever came in contact with the button. For example, if the top of the button were 60px from the bottom of the column, and I wanted to have a 30px space above it, I would have padding-bottom:90px, or 9em or 9rem, etc. on the container. The button would sit in the cushion of padding and the text would never touch it. I assume you have some method for making the columns the same height.

    I would love to know how someone else would approach this.

    #196822
    Beverleyh
    Participant

    To make all the columns the same height, try setting display:flex; on the parent container(s).

    A code sample would be good to give specific help though.

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