html - Make div go to the bottom without overlapping previous div's content -
i have following example:
fiddle: http://jsfiddle.net/yisera/ylty3552/2/
pen: http://codepen.io/yisera/pen/kpzbqp
where have flex grid , have elements display:flex;
. problem have div.card
has div, div.od-card-action
has actions of card, comment, upvote, downvote. however, whenever content of 1 of cards bigger others, stretch, making card bigger match biggest 1 on row.
this desired behaviour, problem div.od-card-action
grow (i don't want happen) , make elements seem out of order shown on first card in fiddle.
i tried:
.od-card-action{ position: absolute; bottom: 0; width: 100%; padding: 10px !important; }
but makes content upper div overlap content of actions div.
is there way can make div.od-card-action
go way bottom regardless of size of card , maintain same size (eg: 50px value)?
thanks in advance!
edit
here's picture demonstration want accomplish:
see how aligned horizontally despite content of above div not being of same size? that's need achieve.
change od-card-action css to:
.od-card-action{ position: absolute; bottom: 0; width: 100%; padding: 10px !important; }
add new css card-content
.card-content{ margin-bottom:50px; }
Comments
Post a Comment