Major Divs' Padding Functionality
Each major division of a Perfect Layout page (#header, #content, #navigation, and #footer) has an inner div (or two) designed to ensure that no changes you make inside the div will effect any other section or the layout itself. Therefore, the only thing that is done inside the padding divs is padding, because padding is handled most consistantly across all browsers. Even if one could, through use of margins and padding remove the need for these padding classes, any one change to the padding of one major div might require a complete rework of the margins and padding for other major divs.
If you want a minimum height on the #content div, you will apply it at the contentPadding level. Internet Explorer 6 doesn't support min-height. A workaround has been placed in the IE 6 Overrides page.
Relevant HTML
... <div class="headerPadding"> <!-- Actual #header content. --> </div> ... <div class="contentPadding"> <!-- Actual #content content. --> </div> ... <div class="navigationPadding"> <!-- Actual #navigation content. --> </div> ... <div class="footerPadding"> <!-- Actual #footer content. --> </div> ...
Relevant CSS
.headerPadding
{
padding:1em;
}
.contentPadding
{
padding:1em;
min-height:450px;
}
.navigationPadding
{
padding:1em 0.5em 1em 0.5em;
}
.footerPadding
{
padding:1em;
}