How To Create 3 column template part 2

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; }