title: How to place a consistent 5px margin around an inner div without specifiying inner divs height?
body: <p>There is an inner div of fixed width and variable height contained by an outer div. The inner div should have a 5px margin on all 4 sides between it and the outer div. </p>
  
  <p>How can this be achieved if the height of inner div is not specified? </p>
  
  <p>With the height of the inner div specified this is very simple. But the inner div is a content container for a masterpage. The content going into this div will have a different height for each page that uses the master page.</p>
  
  <p>If the inner divs height is not set, the bottom margin (between where the inner div ends and the outer div ends) is always 2-3px too long. i.e. 5 5 5 8 This happens across browser types.</p>
  
  <p>Here is the CSS:</p>
  
  <pre><code>#contentframe
  {
      position: relative;
      width: 1010px;
      left: 0px;
      top: 0px;
      margin: 0px;
      padding-top:5px;
      padding-bottom:5px;
      padding-left: 14px;
  }
  #content
  {
      position: relative;
      left: 0px;
      top: 0px;
      width: 980px;
      margin: 0px;
      padding: 0px;
      background-color: #cccccc;
  
  }
  </code></pre>
  
  <p>*** Note: Setting margin-bottom of #content to 5px does not work.</p>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;div id="contentframe"&gt;
          &lt;div id="content"&gt;
              variable height content will go in here
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>This should be dead simple. Set: Outer divs padding to 5px and that's it. But that only works if inner divs height is specified. Otherwise there is an annoyingly "high" bottom margin.</p>
  
  <p>EDIT: Full Source</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head id="Head1" runat="server"&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;style type="text/css"&gt; 
  body
  {
      -x-system-font: none;
      background-color: #A2A2A2;
      margin-top: 0px;
      margin-bottom: 35px;
      padding: 0px;
  }
  #centeredframe
  {
      width: 1010px;
      margin-left: auto;
      margin-right: auto;
      margin-top: 0px;
      padding: 0px;
  }
  
  #contentframe
  {
      position: relative;
      width: 1010px;
      left: 0px;
      top: 0px;
      margin: 0px;
      padding-top: 5px;
      padding-bottom: 5px;
      padding-left: 5px;
      background-color: #ffffff;
  }
  
  #content
  {
      position: relative;
      left: 0px;
      top: 0px;
      width: 1005px;
      margin: 0px;
      padding: 0px;
      height:300px;
      color: #ffffff;
      background-color: #000000;
  }
  
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="centeredframe"&gt;
          &lt;div id="contentframe"&gt;
              &lt;div id="content"&gt;
                  &lt;p&gt;hgjghjghjghjg&lt;p&gt;
                  &lt;p&gt;hgjghjghjghjg&lt;p&gt;
                  &lt;p&gt;hgjghjghjghjg&lt;p&gt;
                  &lt;p&gt;hgjghjghjghjg&lt;p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>