Sunday, July 20, 2008

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.

>> Top

4 comments:

Dunia Mikro said...

can you help me? I applied this template but didnt work. I'm sure i didnt get wrong in copy paste the codes. But there was warning: The element type "div" must be terminated by the matching end-tag " T__T
However i've terminated it by the matching end-tag as you write in this blog...

Chuck said...

Ruly,

Have you posted yet in GBH: Layouts & Templates? The online forums are much easier to use, then Blogger Blog Commenting, for interactive problem solving. If you post there, knowing what Author and Subject you use helps me to find your post.

Nadzy said...

Hi Chuck, thanks for providing the fool proof guide to adding columns to minima blogs. I tried it and it seemed to work. However, I'm struggling as when I review my blog its showing the left sided column (which used to be centred on the page) has shifted to the of my blog and all the text spread over the page. The right side column looks fine - but I can't seem to see my middle column. I followed all instruction as you suggested. HELP - FRUSTRATED BLOGGER. I have to say I found your site the only straightforward one for none blog-whizzs. Just so you can see what I mean my blog is uniquelyexquisitedesigns.blogspot.com

Chuck said...

Nadzy,

I suspect that we can work on this easier if you can ask this question in Blogger Help Forum: Something Is Broken.