Making An Easier 3 Column Template

Making a 3 column template is not as difficult as many bloggers would lead you to believe. I don't recommend this as a cookbook exercise, though - you have to understand what you're doing. It's simply not too hard to understand, when you look at it closer.

You simply look at how the columns are setup.

• Column A, floating left.
• Column B, floating right.

And split either column (and it's your choice).

• Column A, floating left.
• Column A1, floating left.
• Column A2, floating right.
• Column B, floating right.

or

• Column A, floating left.
• Column B, floating right.
• Column B1, floating left.
• Column B2, floating right.

Generally, the choice would be to have the posts ("Main") in the middle of the blog, with one sidebar one the left, and the second on the right. This would leave you splitting the Main column into Sidebar2 and Main2. The asymmetry of this always bothered me.

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

Aside from the asymmetry, with one sidebar defined as a peer to the main column, and the second defined as a portion of the main column, making the widths of Sidebar1 and Sidebar2 identical was an exercise in futility.

But, think outside the box. What if we put both sidebar columns on the same side? Then, we simply split the sidebar column into 2 halves, and leave the main column alone.

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

This arrangement is simpler than you would think.

Here, as just previously, we'll use a Sand Dollar template, which is a stretch type.

Starting with the Header code.

div#main {
float:$endSide;
width:66%;
padding-top:30px;
padding-$endSide:0;
padding-bottom:10px;
padding-$startSide:1em;
border-$startSide: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-top:20px;
margin-$endSide:0px;
margin-bottom:0px;
margin-$startSide:0;
padding:0px;
text-align:$startSide; 
float: $startSide;
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 below, the Body code ...

<div id='main-wrapper'>
<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-wrapper'>
<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 change that to the Header code ...

div#main {
margin-top:20px;
margin-$endSide:0px;
margin-bottom:0px;
margin-$startSide:0;
padding:0px;
text-align:$startSide; 
float: $startSide;
width: 55%;
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 {
float:$endSide;
width:40%;
padding-top:30px;
padding-$endSide:0;
padding-bottom:10px;
padding-$startSide:1em;
border-$startSide: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#sidebar1 {
float:$endSide;
width:45%;
padding-top:30px;
padding-$endSide:0;
padding-bottom:10px;
padding-$startSide:1em;
border-$startSide: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#sidebar2 {
float:$startSide;
width:45%;
padding-top:30px;
padding-$startSide:0;
padding-bottom:10px;
padding-$endSide:1em;
border-$endSide: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 */
} 

Making the additional header rule sets ("Sidebar1" and "Sidebar2") wasn't difficult. Sidebar1 and Sidebar2 are simply mirrors of each other, and each has width of 45% (inside its parent Sidebar), allowing for a 10% margin between the 2. Note that 10% of 40% = 4% of the total width - and the float between Main and Sidebar = 5% of the total width - so that's pretty symmetrical too.

Since both Sidebar (inside its parent Content) and Sidebar1 (inside its parent Sidebar) both float to the left, they use the same basic rules. I just copied the ruleset for Sidebar, and renamed it as Sidebar1. I made a second copy of Sidebar, inverted its left and right ("start" and "end") variables, and named that Sidebar2.

and again below the Body code ...

<div id='main-wrapper'>
<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-wrapper'>
<div id='sidebar'>
<b:section class='sidebar' id='sidebar1' 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>
<b:section class='sidebar' id='sidebar2' preferred='no'>
</b:section>
</div>
</div>

Here, too, a fairly simple task.

I changed

<b:section class='sidebar' id='sidebar' preferred='yes'>

to

<b:section class='sidebar' id='sidebar1' preferred='yes'>

and added

<b:section class='sidebar' id='sidebar2' preferred='no'>

And, added

<div id='sidebar'>
...
</div>

surrounding sidebar1 and sidebar2.

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

And, I'm done.