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

Question

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 like 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?

Answer 1

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.