title: Find out what the cause is of a certain calculated CSS style
body: <p>I have a <code>&lt;div&gt;</code> on a webpage which ends up with a calculated height property of 633px. This is not set in any cascading style sheet, inline or not, nor is it set in a javascript. I have searched everywhere in my code but the number 633 does not show up anywhere. I can solve this by setting <code>style="height: 420px;"</code> which is the height that I want, but IE seems to override this to the 633px that I would get in other browsers too by default. I have verified in both Google Chrome and Firefox/Firebug that the actual contents of the div are nowhere near 633 pixels high. Is there any way I can find out what the reason is for this calculated height? For completeness, here is what Google Chrome reports as the style properties of the <code>&lt;div&gt;</code>.</p>
  
  <pre><code>Computed Style
  background-color: white;
  display: block;
  float: left;
  height: 633px;
  margin-left: 30px;
  margin-top: 20px;
  padding-bottom: 0px;
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0px;
  width: 830px;
  
  Inline Style Attribute
  margin-left: 30px;
  margin-top: 20px;
  
  #overview
  background-color: white;
  float: left;
  padding: 0px;
  width: 830px;
  
  #overview, #overviewempty
  margin-top: 9px; (is crossed out)
  
  div
  display: block;
  </code></pre>
  
  <p>Thanks in advance.</p>
  
  <p><strong>Edit</strong>:</p>
  
  <p>The div in questions contains two div's, one with one line of text in <code>font-size: 16px;</code>, and a div with a height of 367px.</p>
  
  <p><strong>Another edit</strong>:</p>
  
  <p>Okay, so I figured out what's causing this. The second div that the main div contains, contains one image, and a div that's floating over the right of that image, using <code>position: relative; top: -335px;</code>. Internet Explorer keeps the space where this element would have been blank. Any way around that?</p>
  
  <p><strong>Final edit</strong>:</p>
  
  <p>Solved it! I wrapped the contents of the floating div with <code>position: relative</code> in a second div with <code>position: absolute</code>, that gets rid of the whitespace under the main image :) Final HTML looks something like this:</p>
  
  <pre><code>&lt;div id="overview"&gt;
    &lt;div&gt;Some text&gt;
    &lt;div&gt;
      &lt;img src="someImage.jpg"&gt;
      &lt;div style="float: right; position: relative; top: -335px;"&gt;
        &lt;div style="position: absolute; top: 0px; left: 0px; background-color: white; width: 365px;"&gt;
          Some floating contents
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>