Make Your Blog Three Columns

Remember, always backup your template!

Step 1: Go to "Layout" > "Pick New Template" > "Minima White." I use this template for all my layouts and it is the easiest to edit.  When that has saved, click > "Edit HTML."

Step 2: You need to make your layout wide enough to accommodate three columns rather than the two you have now.

Scroll to this section of code:

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

Change the highlighted number to 1000px. This will make your header wider. You can edit this later to any pixel amount you wish. The larger the number, the wider it will be. Same goes for the Outer Wrapper.

Scroll to this section of code:

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

Change the highlighted number to 1000px.

Step 4: Now we add the extra sidebar.

Scroll to this section of 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 */
}

Highlight the code in yellow below, and paste it directly under the code you just found (above):

#left-sidebar-wrapper {
width: 220px;

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

This will give you two columns on either side of your post area.
To put your post area on the left, and sidebars on the right: Change $endSide to $startSide.

Step 5: If you were to save now, nothing would happen! It's like installing a light switch, but not turning it on. So we need to tell the template to turn the left sidebar "on."

Hit "CTRL" and "F" to bring up your "find" box.

Paste the code highlighted in green into the "find" box.

<div id='main-wrapper'>

Just above this line, you will want to add the code highlighted in yellow below.

<div id="left-sidebar-wrapper"><b:section class="sidebar" id="left-sidebar" preferred="yes"></b:section> </div>

Click "Save" and go to "Page Elements."

Step 6:  Now we need to put widgets in and center the post area!
 
Click and drag your widgets over into the new sidebar.

It will probably look something like this:

Notice the posting area is narrow and off-center. To made the posting area wider:

Click "Edit HTML" and scroll to this section of code:

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

Change the highlighted number to 500px.

To move the post area moreto the right so it is centered on the page, add code highlighted in yellow below.

#main-wrapper {

width: 410px;

margin-left: 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 */

}

Click "Preview" to see the changes! Then save!