Stackable CSS Columns
Source order is fairly important for me. I like to make sure the the order makes sense and is practical. For a recent project, I ended up using something quite handy. Something I like to call Stackable Columns.
The basic layout had a left column with the logo and some sidebar information and then a right column with some main navigation, content, and a footer. A two column layout is standard fare these days and I'm sure most would probably just float the two columns. Unfortunately, just floating the two columns as-is would have the source order as Logo, Sidebar, Navigation, Content, Footer. What I needed to do was drop the sidebar down in between the content and the footer.
To pull off the content shuffle, I organized my HTML into 4 containers, (1) is my logo, (2) is my navigation and content, (3) is my sidebar and (4) is my footer. Without applying any CSS, we basically get what is represented in diagram A.
Next, I float (1) and (3) to the left, and float (2) and (4) to the right (diagram B). This leaves us a layout grid somewhat like diagram C but with the design for this site it actually ends up looking like diagram D, which is exactly what I wanted.