How to Get a 3-Column Layout

To change your layout to 3-columns, start by backing up your template. To do this:

1. Login to your blog and click Layout
2. Click Edit HTML
3. Click Download Full Template

Next, make sure you have the Minima Template. (By changing it to Minima, any tweaks you have already made in the HTML will be erased. If you know you already have the Minima Template, skip this part.) To do this:

1. On the Layout page, click Pick New Template
2. Click on Minima and Save Template

Now, let's get to the HTML:

1. On the Layout page, click Edit HTML

2. Scroll down in the main box until you find the part that looks like this:

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

3. Now change the part in read so that it says this:

  width:900px;

4. Right below that section, you should see this:

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

  }

5. Change the part in red and add code so that it looks like this: 

#main-wrapper {

  width: 480px;

  margin-right: 5px;
  margin-left: 5px;
  padding-left: 5px;
  float: right;
  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 */
  }

6. Below that section, find the section that looks like this:

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

7. Change the part in red and add code so that it looks like this:

#sidebar-wrapper {
  width: 190px;
  margin-right: 2px;
  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 */
  }

8. Now, copy and paste the code in step 7 right below itself so that there are two sections called #sidebar-wrapper.

9. Change the duplicated section so that it looks like this:

#newsidebar-wrapper {
  width: 190px;
  margin-left: 2px;
  float: right;
  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 */
  }

10. Now scroll down to the bottom to find the code that says <div id='main-wrapper'>. (If you can't find it, click Ctrl F and copy the code into the search box.)

11. Right above that section, paste the following code:

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

12. Finally,  you should change the width of your header. Scroll back up to the top and find the section that looks like this:

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

#header-inner {
  background-position: center;
  margin-left: auto;
  margin-right: auto;
  }

#header {
  margin: 5px;
  border: 1px solid $bordercolor;
  text-align: center;
  color: $pagetitlecolor;
  }

13. Change the sections in red so that they say the following (only change the borders if you want to remove the border around your header):

/*Header
---------------------------------------- */

#header-wrapper {

  width: 880px;

  margin:0 auto 10px;

  border: 0px solid $bordercolor;

  }

#header-inner {

  background-position: center;

  margin-left: auto;

  margin-right: auto;

  }

#header {

  margin: 5px;

  border: 0px solid $bordercolor;

  text-align: center;

  color: $pagetitlecolor;

  }

14. Preview your template by clicking Preview. If everything looks ok, click Save Template.

15. Click Page Elements and drag some of your sidebar gadgets to your new sidebar and click Save.

16. Click View Blog. You're done!!!

**If you make these changes and it doesn't work, look back through the code that you changed. Most of the code has a semi-colon ( ; ) after each line. If you forget to put those in it won't work.

*If you want to change back to the 2-column layout, move all of your gadgets back to the left-sidebar and then go to Layout and then Pick New Template. Choose the Minima template and Save.