I'm trying to determine the height of a div. This sounds simple, but is complicated by the fact that it's only descendant contents are floated, so asking for the height/outerHeight (using jQuery)/clientHeight/offsetHeight only returns 0, even though it's clear that on the page, it is rendered certainly with a height. Here is an example of the HTML structure:

```
<div id="root">
   <div class="header"></div>
   <div class="body">
      <div class="text-left" id="text-one">
         <p>Some text taking up multiple lines</p>
      </div>
      <div class="text-right" id="text-two">
         <p>Other text</p>
      </div>
   </div>
</div>

```

The "text-left" and "text-right" elements have "float: left;" and "float: right;" on them, so when I ask for the height of "root", it tells me it's 0. However, of course, when I get the height of the "text-one" and "text-two", it correctly tells me that it's 20 or whatever.

How can I determine the REAL height of the the "root" element? (For example, if "text-one" had a height of 50 and "text-two" had a height of 20, it would know that the true height is 50)

I imagine there's some kind of logic to work out all the descendant elements' heights and calculate if they're floated etc etc and give me a final figure...but I'm not smart enough to work that out.

Thanks in advance.

EDIT: Please note changing the HTML (to include a "clear", for example) is not an option. I need to be able to tell the height of this div as it is.