Encountering a common issue in a particular scenario... Attempting to automatically adjust the height of floating divs to ensure they reach the bottom of their parent.
For instance: http://jsfiddle.net/k95nK/1/ The objective is for all floating columns to have equal height and touch the bottom of the container. (Therefore, all columns should match the height of the one with the most content) The parent's height cannot be predetermined. The contents must determine the parent's height dynamically.
.content {
width : 150px;
background-color : #123456;
float : left;
margin-right : 10px
}
#allcontent {
background-color : #90c89a;
}
#allcontent:after {
content:"";
display: table;
clear: both;
}
<div id="allcontent">
<div class="content">hello</div>
<div class="content">hello</br>hello</div>
<div class="content">hello</div>
</div>
I understand such solutions are frequently sought after, (How to get a div to resize its height to fit container?) but I am struggling to find a resolution for my specific case.
Attempts using absolute positioning have caused them to exist outside the document flow...