This is a follow-up to my previous post. I wrote earlier that I was incorporating fluid-width options into Suffusion. Over the past couple of weeks I have managed to work a good bit on this and I am happy to say that I have managed to get the markup rearranged, and I started full-fledged work on incorporating fluid width into the theme today.
You might be wondering what I mean when I say “get the markup rearranged”. To explain, with a fixed-width setting I can define my layout this way:
<div id='sidebar-1'>…</div>
<div id='sidebar-2'>…</div>
<div id='main-content'>…</div>
This would render my page showing the first sidebar, then the second sidebar and then the main content – in other words, it represents a layout with 2 left sidebars. The code would change depending on the layout. So if I wanted a single left and a single right sidebar, my markup would become:
<div id='sidebar-1'>…</div>
<div id='main-content'>…</div>
<div id='sidebar-2'>…</div>
This works pretty easily and well with fixed-width layouts because each column has a pre-defined width. However with fluid width there are significant problems in this approach. Typically fluid width layouts would mean that the sidebars have pre-defined widths in pixels, but the main-content column takes up the remaining available space. Naturally, when you have the main-content appearing before a sidebar, the challenges become significant.
The fix for this is to use what is referred to as the CSS Holy Grail. Actually the Holy Grail is for a fluid-width central column and fixed width sidebars, but the markup and CSS for it can be extended to fixed width layouts as well. Using this approach you will really have just one markup for all layouts:
<div id='main-content'>…</div>
<div id='sidebar-1'>…</div>
<div id='sidebar-2'>…</div>
You can then use the CSS properties float, margin-left, margin-right, left and right to control where you want to show what. This approach is recommended by experts because:
- You can change your layout, but your content will always remain the same. So depending on your layout your CSS changes, not your HTML.
- This has the added benefit of being SEO-friendly, because your main content is closer to the beginning of your document. Particularly in cases where you have a long sidebar, this is a great benefit.
Porting this approach to a fixed-width setting, however was a huge challenge. Just think about it – I had to test all the following configurations for the changed markup:
- General layout:
- No sidebars
- Single left sidebar
- Single right sidebar
- Single left, single right sidebars
- Double left sidebars
- Double right sidebars
- Page templates for each of the 6 configurations above
- In each of the configurations above I had to factor in situations where you would have tabbed widgets, wide sidebars etc.
All in all this amounts to more than 50 different configurations. To add to the complexity, it would have been a great world if Internet Explorer was well-behaved. Instead, for each of the 50+ configurations above, I had to tear my hair out figuring out what works for IE6.
Anyway, this part of the challenge has been overcome. I am working on now putting in fluid width components into the layout. This has its own set of challenges. I had never imagined how easy fixed width has been so far. In changing the code I am now realizing how ingrained the fixed widths are into different elements of the layout. I had a lot of widths running off the main-content column’s width. Again, our favorite IE6 and Microsoft’s proprietary “expressions” are causing me a lot of grief.
Stay tuned – I will hopefully have the new release out very soon.
