title: Why add padding to the main div and not its parent div, wrap?
body: <p>Here is the simple html:</p>
  
  <pre><code>&lt;div id="wrap"&gt;
  
  &lt;div id="main"&gt;
  
  &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;div id="footer"&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's the css:</p>
  
  <pre><code>* {margin:0;padding:0;} 
  
   html, body {height: 100%;}
  
   #wrap {min-height: 100%;}
  
   #main {overflow:auto;
      padding-bottom: 150px;}
  
   #footer {position: relative;
      margin-top: -150px; 
      height: 150px;
      clear:both;}
  </code></pre>
  
  <p>My question is wouldn't it make more sense to add the padding-bottom to the #wrap div and not the it's #main div?  </p>
  
  <p>In case your wondering, this is relating to the footer being always at the bottom and not overlapping its previous content when resizing the page.</p>