Let the highest div dictate the height of the row

Question

I need to create a row from 3 divs with different heights, but they should all be aligned at the bottom of the row, and the row should be the height of the highest child div.

Here is an example of what I mean.

http://cl.ly/997cd739550635df3bbf

Here I tried:

div1 {
position: absolute;
bottom: 0;
left: 0;
}

.div2 {
height: 100%;
float: left;
width: 300px
position: relative;
}

.row {
}

But if I did not set the height. all div2s stacks on top of each other. Is there a way for the row height to be fluid depending on the highest child div?

Answer 1

The problem is that you are using position:absolute(and position:relative) when you only need to float divs.

position:absolute div ( ), divs .

divs display:inline-block vertical-align:bottom bottom.

Answer 2

jQuery , :

$.fn.setAllToMaxHeight = function(){
return this.height( Math.max.apply(this, $.map( this , function(e){ return $(e).height() }) ) );
}

// usage: $(‘div.unevenheights’).setAllToMaxHeight()

Answer 3

Whats in CSS:

display: inline-block;
vertical-align: bottom;