100% div inside absolute div with no width and fixed height

[Lollipop]

I need to have a div that's absolutely positioned and contains two child divs: one with text that goes on top, and one with a background-color that's on the bottom. Like so:\[code\]<div class="test1"> <div class="caption">Text that determines width of parent.</div> <div class="bg"></div></div>\[/code\]I know I can just set a background color on .test1, but I need this background to be a separate div to give me backwards-compatible (IE 7+) control over the position, opacity, width, etc. using jQuery.With the following CSS, I can get everything to work, except that the text is behind the .bg div. I need the text on top.\[code\]<style type="text/css">.test1 { position: absolute; left: 100px; top: 100px;}.test1 .caption { float: left; white-space: nowrap;}.test1 .bg { height: 50px; background-color: #222;}</style>\[/code\]How can I have the width of .test1 be based on the width of the text and have the .bg div be 100% width and underneath .caption? I should repeat that this needs to work in IE 7 and above.Here's a fiddle: http://jsfiddle.net/kbp6r/