Making A 3 Column Stretch Template

Ever since I followed the pack, and experimented with making myself a 3 column template (and discovered how deceptively easy that was), I've been considering making a 3 column stretch template. I have enjoyed my 2 column stretch template so much, that I sort of suspected that a 3 column stretch template wouldn't be a great stretch (pun intended) of effort.

And, I was right.

From what I can tell, 75% of the effort in making any template is in the setting up the widths of the containers. Remember the container layouts.

A 2 column template has 2 columns, floating opposite each other.

• Main, floating left.
• Sidebar, floating right.

All that you have to do is split the Main column.

• Main1, floating left.
  • Sidebar2, floating left.
  • Main2, floating right.
• Sidebar1, floating right.

That part is relatively easy. The challenge comes in keeping the columns from cramming themselves right next to each other. With a standard template, and each container having a fixed width, this is a real struggle. You have to calculate the width of each column, in pixels. Then, you have to add paddings, and margins, and carefully calculate the result. With a 3 column template, this is a bit more complicated, as the Main container is split into Main2 and Sidebar2, each container needing its own paddings (and the paddings of one set of containers becoming the margins of the parent container - or is it vice versa), which means that Main1 (pka Main) must be resized accordingly.

With a stretch template, the width of each container is allocated in % of parent container width. Containers Main1 and Sidebar1 float left and right, respectively. Sidebar2 and Main2 (within Main1) float similarly. The width of each container is in %. All that you have to do is establish "Main1 + Sidebar1" < 100%, with the difference from 100% becoming the margin between the two containers. Similarly, "Sidebar2 + Main2" < 100%, with the difference from 100% becoming the margin between those two containers. Having laid out the containers, with their widths, the rest wasn't terribly complicated. I sort of reused the code from my previous effort, my 3 column Minima template.

For a challenge, I started with a standard (newly setup) Sand Dollar template. Sand Dollar is similar to Minima, in that the Main (posts / sidebar) area of the template contains very few decorations, making all screen width usable for content. The big difference between Minima and Sand Dollar is that Minima comes in two versions - fixed width and stretch, while Sand Dollar comes in just 1 version - stretch.

I examined the layout of a standard Sand Dollar template.

• Main, floating left, width 66%.
• Sidebar, floating right, width 31%.
• Leaving a 3% margin between the two containers.

I split the Main container (now named Main1).

• Main1, floating left, width 77%.
  • Sidebar2, floating left, width 25%.
  • Main2, floating right, width 72%.
  • Leaving a 3% margin between the two containers.
• Sidebar1, floating right, width 20%.
• Leaving a 3% margin between the two containers.

You can change any of these, as you like. You can make the main column narrower or wider, or make either sidebar narrower or wider, within limits. Just remember, if you go over 100%, you may end up with a dropped main or sidebar. And note that, if you're willing to have both sidebar columns on the same side and next to each other, this process becomes a bit simpler.

Enough design, let's look at the actual coding.

First, backup the template that you have right now.

Next, go to the Edit Template wizard. Find two snippets of code.

The first, in the Header, at the top ...

@media all  {
div#main {
float:right;
width:66%;
padding:30px 0 10px 1em;
border-left:dotted 1px $bordercolor;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
}      
div#sidebar {
margin:20px 0px 0px 0;
padding:0px;
text-align:left; 
float: left;
width: 31%;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
} 
} 

And a second, in the Body, nearer to the bottom ...

<div id='main'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

<div id='sidebar'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>

And replace those two snippets of code with two slightly larger snippets. When you do this, carefully examine your current template, and what widgets you have in the Main (posts column) and Sidebar containers. Here, we have only BlogArchive1 and Profile1. If you've added any custom widgets to your main or sidebar columns (and almost everybody does, after any amount of time), be sure to copy the widget code from your current template to your new template!

The first ...

@media all  {
#main1-wrapper {
width: 77%;
float: left;
padding:20px 0 10px 1em;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
}

#sidebar2-wrapper {
width: 25%;
float: left;
padding:0px;
border-left:dotted 1px $bordercolor;
text-align:left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

#main2-wrapper {
width: 72%;
float: right;
text-align:left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
}

#sidebar1-wrapper {
width: 20%;
float: right;
margin:20px 1em 10px 0;
padding:0px;
border-right:dotted 1px $bordercolor;
text-align:left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}
} 

And the second (which now becomes the same code as for my 3 column fixed width template)...

<div id='main1-wrapper'>
<div id='sidebar2-wrapper'>
<b:section class='sidebar' id='sidebar2' showaddelement='no'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>
</div>
<div id='main2-wrapper'>
<b:section class='main' id='main2' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
</div>

<div id='sidebar1-wrapper'>
<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>

Save your changes.

Test.

And finally, backup the template, again!

And please feel free to examine the test result.