Source Ordering Functionality
Source ordering in Perfect Layout means that the code for the main content comes before the navigation code in the source. This is very helpful when users don't have CSS enabled or when using the handheld stylesheet, preventing them from having to scroll past the same navigation links on every page. In addition, it puts the unique parts of each page closer to the top for easier editing. Using source ordering requires at minimum the CSS listed below. Additional code is needed for IE 6 and IE 7 to use this feature correctly. Check their pages for more information.
The #wrapper div contains the div you want to show up first in the code, which is in this case, #content. The float:left attribute allows the #content div's content to be float independent from things like the #navigation div. The width:100% is to take up all available space, necessary for the next part. The #content div margin attribute is to give a 200 pixel space for the #navigation to fall into. When the #navigation attributes are applied, it has a width of 200 pixels, exactly the same as the margin for #content. Further, #navigation is floated left, but because it is below the #wrapper in the code, it appears on the far right side of the #content div. That's where the left margin of -100% comes in. It forces the #navigation area all the way back over to the space reserved for it on the left of the #content div. It is probably a simple matter to make #navigation appear on the right, rather than the left, side of #content, but that is to be discussed in another article.
A more detailed explanation of exactly how source ordering of these columns works can be found in the inspiration article this is based on: Position is Everything's article One True Layout: Appendix D. Read their article and practice with the code to gain a better understanding.
Relevant HTML
<div id="wrapper"> <div id="content"> <!-- All main content here. --> </div> </div> <div id="navigation"> <!-- All navigation content here. --> </div>
Relevant CSS
#wrapper
{
float:left;
width:100%;
}
#content
{
margin:0 0 0 200px;
}
#navigation
{
float:left;
width:200px;
margin-left:-100%;
}