- This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
Viewing 3 posts - 1 through 3 (of 3 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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,
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.
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.