Learn About All Thing: Template Tutorial

After you understand each part of the template with a different color, now we started making three column template

To create three columns, we need to change width of template
we should do:
1. Changing the template width
2. Adding new columns

Fisrt Step, See this code:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
float: $startSide;
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 */
}

Replace with this code:

#header-wrapper {
width:870px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#outer-wrapper {
width: 870px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 420px;
float: $startSide;
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*/
}

Adding new columns
Next step, select "Expand Widget Templates" and find this code:

#sidebar-wrapper {
width: 220px;
float: $endSide;
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 */
}

Then replace with code below:

#sidebar-wrapper {
width: 220px;
float: left;
padding-right:5px;
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*/
}

#sidebarLeft-wrapper {
width: 180px;
float: right;
padding-left:5px;
word-wrap: break-word;
overflow: hidden;
)

Then find this code:

<div id='sidebar-wrapper'>

Put the code below, above <div id='sidebar-wrapper>

<div id='sidebarLeft-wrapper'>
<b:section class='sidebar' id='sidebarLeft' preferred='yes'> </ b: section'>
</ div'>

The last step, find the code below:
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

Replace with this:

#footer {
width:840px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}