SuperTony SuperTony - 2 months ago 10
CSS Question

Align div element to bottom of container

I am trying to bottom align one of three divs inside a container, but I'm having some issues.

As you will see, if I try and use absolute positioning on the

bottom-aligned
div the height becomes a problem.

I can set a specific height, but the content within the
cta-item
divs could vary from very small to very large.

I'm trying to create a solution for all use cases.

I know I can use jQuery to get the height of the largest
cta-item
div and adjust accordingly, but I'm trying to avoid using jQuery/JS for this whenever possible.

I created a fiddle here with what I currently have.

Thank you in advance!



.dynamic-cta-ctr {
display: flex;
}
.dynamic-cta-ctr .cta-item {
flex: 1;
text-align: center;
padding: 0 30px;
position: relative;
border-right: 1px solid #555;
}
.dynamic-cta-ctr .cta-item:last-child {
border-right: none;
}
.dynamic-cta-ctr .cta-item .bottom-aligned {
/* position: absolute;
bottom: 0; */
}

<div class="dynamic-cta-ctr">
<div class="cta-item">
<div class="heading-text"><h3>Some content</h3></div>
<div class="cta-field-content">Some content that sort of hangs around</div>
<div class="bottom-aligned"><h5>Bottom aligned content</h5></div>
</div>
<div class="cta-item">
<div class="heading-text"><h3>You can have your cake and eat it too!</h3></div>
<div class="cta-field-content">Some content that sort of hangs around</div>
<div class="bottom-aligned"><h5>Bottom aligned content</h5></div>
</div>
<div class="cta-item">
<div class="heading-text"><h3>More people will come if you say we have punch and pie</h3></div>
<div class="cta-field-content">Some content that sort of hangs around</div>
<div class="bottom-aligned"><h5>Bottom aligned content</h5></div>
</div>
</div>




Answer

Add this to your code:

.cta-item {
   display: flex;
   flex-direction: column;
}

.bottom-aligned {
    margin-top: auto;
}

revised fiddle

More details here: Methods for Aligning Flex Items

Comments