Tonight I updated the skin for this site to use the 3 column approach from here, one of the "holy grail" layouts. You can't really see a difference can you? Actually this page is only using 2 columns and I have code in the codebehind file for the master page to change the css class for the center div depending on whether there is anything in the left and right divs so right now you're really not seeing the "holy grail" technique but I thought it might be interesting to explain the various techniques I have found and tried so far and the pros and cons. I will say the approach of this one is the best one so far that I have actually been able to get working in mojoPortal.

I think I will move the mono links to the right column for a little while after I post this so you can see the 3 column div technique.

The most difficult thing in implementing a 3 column CSS layout is getting it to work in IE because the current released versions of IE are not as CSS compliant as they should be, hopefully this will be addressed in IE 7. It makes things really hard for web designers and developers to move forward with standards compliance when a dominant browser requires all kinds of crazy hacks in the css to make it work. Reminds me of a few years back when it was such a pain to make things work in Netscape 4.7 the same as they did in IE.

In mojoPortal you have 3 virtual columns available to you that you can add content to using the CMS features with reasonable uses being:
1 content in center only
2 content in left and center
3 content in right and center
4 content in left, center and right (aka 3 column layout)

Basically we're talking 1, 2, or 3 columns so one important goal of the css technique is it must be flexible enough to adapt to each scenario. My solution here is to programatically assign the css class to the center div and show and hide the left and right divs depending on if they have content. The different css classes assigned to the center div typically adjust the margins to either provide room for the outer columns or to take up the available space if the outer columns are empty. So basically we create a 3 column layout and remove things to make it 2 or 1 column so achieving the columns is really the biggest challenge.

The first 3 column approach that I got working in Firefox, IE, and Opera was one I learned from the wrox book, Accessible XHTML and CSS Web Sites.  It put the divs in this order: left, right, center, then it used float : left on the left side, float:right on the right side and since the float command takes the elements out of the flow of the page it allows the center to take the place where the floated divs would have been as if they weren't there at all. You do have to adjust the right and left margins of the center div so that it doesn't overlap the content of the floated divs on the sides. Its still had a problem in IE if you had any tables or divs inside the layout divs with a width of 100% sometimes this would push the content to the bottom of the page. But I found that if you change to 99% or 98% it generally fixes it and you don't usually notice the difference to much. So that worked and I have been running it on this site (until tonight) and on joeaudette.com for several weeks now.

However the above approach has a few shortcomings. Positioning the dvs in the order left, right, center places the main content at the bottom of the markup which is not ideal for search engine consumption and poses a problem in browsers that have no css support because the content would display in physical order, again with the main content pushed to the bottom.

David Neal has also been working on CSS layout and pointing me to a lot of good resources. He tried this holy grail technique in mojoPortal and found he couldn't get it to work in IE even though the sample page does work. Then I tried the OneTrueLayout technique and came to the same result, they worked great in Firefox or  Opera but were out of whck in IE.  I think things fall apart in IE if the interior content of the layout divs also include divs with floats and positioning, in other words more complex markup and layout than the samples.

The OneTrueLayout technique is interesting, it orders the divs center, left, right and uses large negative margins to align things. Seemed pretty creative but it didn't work for me in IE. But there was a link in the OneTrueLayout Article to another article about the "holy grail" layout, but not the same one as above and it worked. This technique orders the divs in natural order, left, center, right, and it uses absolute positioning with fixed widths for the left and right columns and allows the center column to be fluid and use any available width. So its good for search, accessible, and it works with IE! Sweet!

Also it adapts nicely to 1 or 2 columns. I just hide the empty columns and change to a different css class on the center.

Along the way I also tried the CSS Creator, but again IE was a problem at least in mojoPortal. I also studied the CSS Zen Garden examples but I found they don't really lend themselves to wrapping around dynamic content, many of them are just way to artsy. I would love it if someone can prove me wrong and do something that artsy with mojoPortal but its beyond me to make something that artsy integrate with any possible content from articles to forums. I suppose it would be more reasonable to make a specific page that you wanted that artsy and then use the feature in mojoPortal that allows page specific skins. That kind of detailed styling is for when you know exactly ahead of time what the content of the page will be.

This is not to say that you can't do beautiful designs that will work with any dynamic content, I'm just saying some of those zen examples are way exotic and taylored to the specific conetnet of the page.

David's latest blog post pointed me at yet another great resource, Open Web Design, totally awesome for the design challenged like me. I should probably ditch some of the skins I made myself for mojoPortal and create new ones based on some free designs from this site.