在浮动容器内对齐元素的绝对底部（带有左右浮动）

Question

I want to align text to the bottom of a container. I know I can use position: relative; on the container, and position: absolute; bottom: 0; position: absolute; bottom: 0; on the inner element to accomplish this. But, I have floated elements like such:

    float: left;                 .align-bottom (and also float: left)
++++++++++++++++++++++++++++++++++++++++++++++++
+     #blah                    |               +
+                              |               +
+ Title            btn1 btn2   | TEXT          +
++++++++++++++++++++++++++++++++++++++++++++++++

Where the floated element on the left has a non-fixed size.

How can I align TEXT to the bottom of the right container using CSS and HTML?

So far I've tried:

.align-bottom {
  /* the 2nd floated element, on right side */
  position: relative;
  overflow: auto;
  height: 100%;
}
.align-bottom div {
  position: absolute;
  bottom: 0;
}

CSSDesk: http://cssdesk.com/kNE98 (like jsFiddle, but no JS)

I've seen a few questions somewhat related (not many two floating containers though) including: Vertical Align with Absolute Positioning but it wasn't much help because the floated sections were the same height.

Answer 1

body{position:relative}
.align-bottom {
  position: absolute;
  bottom: -50px;
}

Dont check in on CSSDesk because the iframe has height 100% and it would send the bottom div to the bottom of the page. But with this code the div will be at the bottom of the body.

Answer 2

So I added a parent wrapper around the two columns you want to be the same height, along with a cf (clearfix) class that makes the wrapper be the full height of the floated element. Then I set the width (29%) of the element to make it sit nicely on the right side of the "left" div. Using position absolute and setting it to bottom: 0 allowed it to sit nicely.

Here is the cssdesk link with the correct code: http://cssdesk.com/SjSFQ

Regards