Set Parent's Height Based On Child's

I have a structure that I want to repeat with different content each time. Here's the code (for a Web version of a script):

<div id="1_0" class="lineblock"><div class="whosays"><span>CHARACTER:</span></div><div class="whatsaid"><span>Line...</span></div></div>

The content of the <span> in the whatsaid div changes. Sometimes it fill fit on one line; sometimes not.

Using static heights, it looks like this.

So, I want to change the height of the lineblock div and the whosays div based on how tall the whatsaid div needs to be.

Is there a way to do this? Any kind of scr开发者_JS百科ipting isn't really an option in this case.

I've tried various combinations of height:auto and height:100%, but nothing's worked.

Thanks in advance!

Graham's links are probably more interesting than what I used here. However, that's works. You can see a demo here : http://jsfiddle.net/uwf8U/1/

The lineblock div will expand to the height of whatever content is inside it. That leaves setting the height of the whatsaid div as the main challenge.

Essentially what you have here is the classic "CSS Equal height column" problem, which as been discussed in several places. Check out the following links:

http://www.alistapart.com/articles/holygrail/

http://www.alistapart.com/articles/fauxcolumns/

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks