Placing a div at the bottom of the parent

So I have managed to set the height of all slider wrapper the same as the tallest one but now I need to put a child element right at the bottom of this dynamically modified heights. Before running the jQuery the link for adding to cart was placed at the bottom by default but now after all the elements have been placed we change the height of some of them ie make them taller those links place a little with space to the bottom of the parent. What do I do?

I started with changing the child to flex so later I check if I can place it where I want but the text-align: right is not working now. All right the solution to alignment is a simple CSS, apparently, text-align is not for flex:

justify-content: flex-end;

But still, the question of positioning remains. So far this didn’t work:

align-self:flex-end;

Also modifying CSS with jQuery like the following wouldn’t work:

$owlItem.css('bottom','10px');

because the item already has the bottom – at the top-value of 0.
Just in the middle of struggling, I realized that flex doesn’t honor the margin of parent – actually it was position: absolute; that has this behavior — and expands beyond the parent. So I started to resize it first. For a while I wondered why this isn’t working:

$wid = $('.owl-item').css('width');
console.log(($wid - 20) + 'px');

Then I realized that $wid is actually a string and not an integer so I have to parse it first. And now width is fine:

$wid = $('.owl-item').css('width');
$owlItemA.css('width',(parseInt($wid) -12) + 'px');

And this is how it works with the trick of position: absolute inside a parent of position:relative:

$owlItemA.css('top',(maxHeight -1)+ 'px');

Leave a Reply

Your email address will not be published. Required fields are marked *