Question

Basically, I want an outer DIV’s height to be dictated by its inner DIVs (specifically a left and right inner DIV) and I want any inner DIV less than that height to be anchored to the bottom of the outer DIV.

Rough sketch:

+=============================================+
|                                   **********|
|                                   *  multi *|
|**********                         *   line *|
|*  text  *                         *   text *|
|**********                         **********|
+=============================================+

I do not want to specify the height of the outer DIV, I want it to expand to its tallest inner DIV. Also, while in some cases it might be the left inner DIV that needs to be anchored bottom with the right inner DIV dictating height, in other cases it will be the opposite with the left having taller content and the right needing to anchor bottom.

One of my attempts was to use float:left and float:right for the inner DIVs. This nicely grew the outer DIV’s height accordingly, but I couldn’t find any way to get bottom anchoring for the shorter DIV.

Another attempt was to use position:relative for the outer DIV and position:absolute bottom:0 for the inner DIVs (one with left:0 the other with right:0), but that only works if I give the outer DIV a fixed height instead of having it adjust to its content.

This seems like such an easy thing, and I think it would be easily doable with TABLE, but I try to avoid that at all costs.

EDIT:

Based on the final suggestion below by bookcasey, I was able to achieve what I wanted using display:table[-row|-cell] on my DIV elements and using vertical-align:bottom and text-align:[left|right] like you would with a table. As in…

<div style="display:table;width:100%;">
  <div style="border: 1px solid;display:table-row;">
    <div style="border: 1px dotted;display:table-cell;vertical-align:bottom;text-align:left;">
    text
    </div>
    <div style="border: 1px dotted;display:table-cell;vertical-align:bottom;text-align:right;">
    multi<br />line<br />text
    </div>
  </div>
</div>

Answer 1

I reverse engineered a table into this. With some tweaking it could work.

div {display:table-row;}
p {display:table-cell; vertical-align:bottom; width:125px;}