DIY Custom Blog Design Part 3: 3 Column Template ~ Log-Tutorial

This is Part 3 of a series of tutorials, if you need to start at the beginning, click here.

In this part, I will show you how to make a 3 column template for your Custom Blog Design.

First, you are going to head to your "Edit HTML" page, and find #header-wrapper and change the width to 1000px (or whatever you like, remember this is CUSTOM, so don't be afraid to play around with it). Shown Below.

Next, find your #outer-wrapper and change it to 1000px as well (or whatever value you used on the header-wrapper).

Now, just below your #sidebar-wrapper { } section, paste this:

#new-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 */
}

As seen here:

Now, just BEFORE this line: <div id='main-wrapper'>

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

As seen here:

Now, when you save your template, you will see this on you "Page Elements" page:

Now, make sure you drag some gadgets over to your left side, or add some. After you do that, when you view your blog, you will notice that the columns need to be adjusted.... they obviously are not sized properly (like you can see below).

What we need to do to fix this, is to go back into your "Edit HTML" page, and find the Outer-Wrapper section again. Below I have given you a chart that will help you see what the different tags and sizes mean (click on it if you need to view it larger).

Now that you have an idea of what the tags mean, here is what I did to customize my 3 columns (remember, Custom, you don't have to do it how I did it, just play with it!)

#outer-wrapper {
background: white;
width: 1000px;
margin:0 auto;
padding:30px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 540px;
padding: 0px 30px 0px 30px;
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 */
}

#sidebar-wrapper {
width: 180px;
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 */
}

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

Here is a diagram that explains the changes that I made: