Search code examples
cssxhtmllayoutsticky-footer

Why add padding to the main div and not its parent div, wrap?

Here is the simple html:

<div id="wrap">

<div id="main">

</div>

</div>

<div id="footer">

</div>

Here's the css:

* {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;}

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?

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.

Solution

  • I'm guessing you might get into trouble with the box model there, since the padding would add to the height of the #wrap — Have you tried it out?