Page Layout Functionality
The #page div will contain all text, imagery, and other content (except for the window background) in Perfect Layout unless you choose to vary the overall layout of the page. Its CSS properties are some of the most important parts of Perfect Layout, so I will explain each line separately. Try resizing your browser window to see the different effects of the lines below.
margin:0 auto; - The #page div (and therefore your page) will be centered because the left and right margins are of equal widths that are "as wide as they need to be" thanks to the auto value, but requires a #page width (line 3). The 0 means that there is no top or bottom margin. More info about CSS centering.
padding:3em 0; - A top and bottom padding is added to give some eye-pleasing space between the top of the window and the start of the page content. Whenever possible, I use paddings instead of margins because they are handled more consistently over more browsers.
width:80%; - The width of the #page div will be based on a percentage of the width of the window. Combined with the left and right auto margins, #page will be both centered and fluid width.
min-width:600px; - The width of your page content will never be narrower than 600 pixels. This is essential when dealing with a fluid width layout, so that content won't become jumbled if the window is made very narrow. When resizing the window narrower and narrower, the #page div will remain centered even after it has stopped becomming narrower until the margins are no longer there. Only then will the horizontal scroll bar appear. Internet Explorer 6 doesn't recognize this CSS, so a special set of classes were used. They are described in the IE 6 Overrides page.
max-width:1200px; - Similar to the way that the min-width line above works, the #page div will only grow as wide as 1200 pixels. In today's age of ever larger displays, Perfect Layout uses this line to ensure that text intended to be a paragraph will not be stretched into an unreadable single line. The #page div will remain centered even after the maximum width has been reached. Internet Explorer 6 does not support this CSS. I consider this a legacy issue and am unlikely to pursue a solution to this limitation.
Relevant HTML
<div id="page"> <!-- All site content here. --> </div>
Relevant CSS
#page
{
margin:0 auto;
padding:3em 0;
width:80%;
min-width:600px;
max-width:1200px;
}