0

I have several element I want to equalize. For this I'm using a basic function that reads the biggest height and sets it to all those elements.

On each element I have a couple of inner elements. The last one of this inner elements I want to vertical align to the bottom.

-------MainElement------
|  _________________   |
| |                 |  |
| | First Elem      |  |
| |_________________|  |
|  _________________   |
| |                 |  |
| | Second Elem     |  |
| |_________________|  |
|                      |
|                      |
|                      |
|                      |
|  _________________   |
| |       Last      |  |
| | Vertical Bottom |  |
| |_________________|  |
|-----------------------

The first element and the second one might have variable height depending on its content (text and image), but the last one will be always fixed

If I try to vertical align the last element using a position absolute, then this breaks my equalize function that sets an inline height css property to the element.

-------MainElement------
|  _________________   |
| |                 |  |
| | First Elem      |  |
| |_________________|  |
|  _________________   |
| | Second overlaps |  | 
| |_________________|  |
| |       Last      |  |
| | Vertical Bottom |  |
| |_________________|  |
|-----------------------

If I try using display table, and then table-cell to the inner elements this also breaks, since each innerelements shares the total available width as if they were all elements of the same row.

-------MainElement------
|  _____________         |
| |First|2nd   |         |
| |Ele  |Elem  |         |
| |     |      |         |  
| |     |      |_______  |
| |     |      |Vert   | |
| |     |      |Bottom | |
| |_____|______|_______| |
|-------------------------

Due to support for old browsers, I can't use display flex which is great actually but doesn't behave nicely with IE =(

If there a way to accomplish this?

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Rodrigo Martinez
  • 913
  • 3
  • 13
  • 29
  • 1
    If you're using JS anyway I'd suggest you adapt that to suit your requirements. Flexbox is *designed* for this. If you can't use it...JS is your best bet. – Paulie_D Dec 05 '17 at 20:10

1 Answers1

0

You can use flexbox: Define the container as a flexcontainer with these settings:

.container {
  display: flex;
  flex-direction: column;
  justify-items: space-between;
}

...and then add margin-top: auto to the last child element

Johannes
  • 64,305
  • 18
  • 73
  • 130