Absolutely positioned element within relative parent. Need parent to grow to the width of the element inside

I have a div that I want to float other divs in. Within the floating divs, I need the content to be positioned at the bottom because some of them have higher content than others and I don't want them to align on top. I have tried something li开发者_如何学Goke this:

.right {
  float:right;
}
.left {
  float:left;
}
.actionCell {
  margin:2px 5px 2px 5px;
  border:1px solid Black;
  height:100%;
  position:relative;
}

HTML:

<div style="position:relative;">
    <div id="HeaderText" class="left actionCell"><span style="position:absolute;bottom:0px">Header&nbsp;Text</span></div>
    <div id="SelectedItems" class="left actionCell">10 Selected Items</div>
</div>

The one with the span on the inside works, however I need its parent container to grow to its width. Any ideas how to solve this problem without using tables?

Unfortunately absolutely positioned elements no longer interact with their parent, so to get the effect you want, you'd need a hack. Fortunately, web development abounds with hacks:

CSS only, using a prop element

Create a visibility: hidden element inside your <div id="HeaderText"> that has the same content as your absolutely positioned <span>. This will force the width of <div id="HeaderText"> to contain your absolute <span>.

On the downside, this duplicates content that anyone without CSS (and search engines) will see.

jQuery to get absolute child's width

Set the width <div id="HeaderText"> to that of its absolute <span> child. This gets around the duplicate content, but your users need Javascript.

You can see them both in action here.