title: CSS Padding Stretching Divs: Internet Explorer Vs. Chrome/Firefox
body: <p>Hello StackOverflow community,
  I have run into a problem that quite frankly is baffling me and I am surprised that I haven't run into this problem sooner.</p>
  
  <p>Apologies if I have overlooked something simple - I have done extensive Google and StackOverflow searches to no avail.</p>
  
  <p>My problem is that when applying a padding to a Div the container is stretched by the specified padding amount in Firefox/Chrome but not in IE.  I have seen suggestions for adding "display:inline;" or "display:inline-block;" to fix the problem but this has effect for me.</p>
  
  <p>Here is an rendered example:
  <img src="https://i.stack.imgur.com/mNovc.jpg" alt="http://img825.imageshack.us/img825/7190/testpic.jpg"></p>
  
  <p>And the code for this example:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  
  &lt;style type="text/css"&gt;
  #div1 {
  background-color:black;
  width:400px;
  height:300px;
  padding-top:10px;
  }
  
  #div2 {
  background-color:red;
  width:400px;
  height:280px;
  padding-top:10px;
  }
  
  #div3 {
  background-color:blue;
  width:400px;
  height:260px;
  padding-top:10px;
  }
  
  #div4 {
  background-color:green;
  width:400px;
  height:200px;
  }
  &lt;/style&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id="div1"&gt;
  &lt;div id="div2"&gt;
      &lt;div id="div3"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="div4"&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>What am I missing?  Any help would be appreciated.</p>
  
  <p>Thank you.</p>