This is where a good WYSIWYG Editor comes into play. Believe it or not, I use FP for all final design manipulation. It allows me to work in a drag and drop interface using layers which can be moved easily on the canvas. As the layers move, the inline CSS that FP generates also changes to reflect the new position on the canvas. Its all cross browser compatible as you are dealing with CSS and absolutes.
I found one of the easiest ways to help someone understand SOC is to have them build a page in FP or DW or whatever WYSIWYG they are using. I believe most allow you the ability to work with layers and absolute positioning.
Once you build the page, usually 4 containing elements; center, left, top, right, usually in that order, you can then grab those elements and start sizing, dragging, styling, etc. When you are finished, switch to HTML view and rename the classes/IDs that were generated to be more in tune with your naming conventions. Now, take the inline CSS and move it to an external file. That becomes the working template for the rest of the site. Those 4 elements become includes which are the foundation of the site. Think of them as APUs or Absolutely Positioned Units. Those Units can be positioned in any order in the HTML. Each Unit is being absolutely positioned in the viewport using CSS top, right, bottom or left coordinates.
For example, and I’m going to do this in order, your center element (the primary content) is absolutely positioned 120px from the top and 210px from the left. Note: My footer elements are usually contained within the center element. They are the last include in that primary content div.
Then we have either the left or top element depending on the link architecture, usually the left element. It is absolutely positioned 120px from the top and 10px from the left.
Next comes the top element and it is absolutely positioned 10px from the top and 10px from the left.
And finally the right element which is absolutely positioned 120px from the top and foo from the left. Depends on your target resolution. All 4 elements will have widths assigned to them. Some may have heights but I prefer to let the vertical flow freely.
So here we have these four APUs that we can easily size, resize, reposition, basically do anything we want with them. I like SOC and have been using it for years. Many have looked at that source code with a glazed look in their eyes wondering "how the hell did they do that?" The code usually looks like this...
<body>
<primary content>
<left include>
<top include>
<right include>
</body>
It doesn’t get any simpler than that and that is what really counts in SOC, simplicity.
I should mention that my starting canvas is a new page with a full size background image of the design. I’m using my WYSIWYG drawing and editing tools to develop the APUs which makes for a very streamlined design environment. I’ll give my <divs> a border of 1px so I can see what is going on and take it from there.
>> And footers, which I notice your example layout did not have.
In the beginning, I realized that trying to position a footer at the bottom of the page was a problem based on my limited knowledge of CSS then, and even now. So, I just changed design strategies and started including the footer within the main content div, that solved all the problems based on my design architectures.
