Three Column Minima Lefty Stretch

This blog is all about adding columns to free blogger templates, and this post is all about adding a third column to Minima Lefty Stretch. If you want a tutorial for a 3 column Minima Lefty Stretch blogger layout, look no further.

These instructions are simple and easy, and you can do it if you don't know the first thing about HTML (which is perfect, because I don't). Update again: thanks for all the great comments. While it's hard to respond to each one individually, I do carefully read them all and have modified the post in order to make it (I hope) a better resource for all. Cheers!

Adding a third column to Minima Lefty Stretch is easy, and these instructions make it even easier. The Minima varietals of Blogger are some of the simplest templates out there, and they are also easy on the eyes. Consequently, there are many, many bloggers who like and use Minima.

This post is for adding a third column to Minima Lefty Stretch in "Layout Version". To check which version you're using, go into your dashboard and look just to the left of the "View Blog" link on the top left of the page. If the tab there says "Layout", you are using the Layout version of Minima and this post is for you.

So without further adieu, let's get started. First, open up Blogger and go into your Dashboard, then click on the "Layout" tab. Then go into the "Edit HTML" tab. You will see a bunch of gobbledygook and gobbledygook it shall remain - you don't need to know anything about it. Just scroll down until you see the "Outer-Wrapper" section, it is marked by the following: /* Outer Wrapper. Easy enough, but an even easier way to find it is use your brower's control F (CTRL+F) command. You can just type CTRL F and then type /* Outer-Wrapper into the dialog box and click "next".

/* Outer-Wrapper
-----------------------------------------------

Now, change the width of the "main-wrapper" from 67% to 52%, and the float from $endSide to $startSide. Note that the html code "$startSide" is case sensitive, to avoid the problem you can just use "left" for "$startSide" (and you can use "right" for $endSide):

#main-wrapper {
margin-$endSide: 2%; <-------change to $startSide
width: 67%; <-------change to 52%
float: $endSide; <-------change to $startSide
display: inline; /* fix for doubling margin in IE */
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 */

That piece of code should now look EXACTLY like this:

#main-wrapper {
margin-$startSide: 2%;
width: 52%;
float: $startSide;
display: inline; /* fix for doubling margin in IE */
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 */

So far so good. Now, take this new block of code (below, in red) and paste it exactly as it appears directly in the space just before the */ Headings section. It's helpful to use "CTRL C" to copy, and then "CTRL V" to paste, if you didn't already know that trick. Regardless of how you cut and paste, you must paste the code directly in that space before the */Headings section and do not accidentally delete any code from the "#sidebar-wrapper" code above, including the "}" character at the very end. To paraphrase Monty Python, every character is sacred!

#right-sidebar-wrapper {
margin-$endSide: 2%;
width: 20%;
float: $endSide;
display: inline; /* fix for doubling margin in IE */
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 */
}

The new code block should look exactly like this:

#main-wrapper {
margin-$startSide: 2%;
width: 52%;
float: $startSide;
display: inline; /* fix for doubling margin in IE */
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 {
margin-$startSide: 2%;
width: 20%;
float: $startSide;
display: inline; /* fix for doubling margin in IE */
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 */
}
#right-sidebar-wrapper {
margin-$endSide: 2%;
width: 20%;
float: $endSide;
display: inline; /* fix for doubling margin in IE */
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 */
}

At this point, believe it or not, there is only one more step. Update: You MUST insert/paste the below new section in the right place: AFTER the main wrapper div. Your code should go sidebar wrapper first, then main wrapper, then right sidebar wrapper. If you are still having trouble, also check to make sure your floats are set correctly. The left sidebar should be set to left or $startSide, the main side bar wrapper should also be set to left or $startSide, and the right sidebar wrapper should be set to right or $endSide. This particular step is hard only because you need to make sure you paste the additional code in the right spot, and this next spot can be a hard place to identify (CTRL+F helps here a lot), but you must put in the right spot.

Anyway, scroll down to the very end of the entire page. Several lines above the very end you will see the following:

<!-- spacer for skins that want sidebar and main to be the same height-->

Now, immediately above the line that says <!-- spacer for skins that want sidebar and main to be the same height--> and below the end of the "main-wrapper" div section (be careful not to delete any of the code in that section), paste in the following code EXACTLY as it appears below:

<div id='right-sidebar-wrapper'>
<b:section class='sidebar' id='right-sidebar' preferred='yes'>
<b:widget id='Subscribe1' locked='false' title='Subscribe' type='Subscribe'/>
</b:section>
</div>

Note: this will also insert the RSS feed widget into your new sidebar, but you can customize that however you'd like after you finish adding the new column. Update: If you get an error message that says the widget ID should be unique, you have an RSS feed widget already loaded in your original sidebar and you'll need to delete that one temporarily. But don't worry, you can customize your columns however you like once you get them set up. If not, there's no need to worry about it. So, after you do that, the newly modified section should now look like this:

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

<div id='right-sidebar-wrapper'>
<b:section class='sidebar' id='right-sidebar' preferred='yes'>
<b:widget id='Subscribe1' locked='false' title='Subscribe' type='Subscribe'/>
</b:section>
</div>

<--spacer for skins that want sidebar and main to be the same height-->

And you are a now master Minima Lefty Stretch coder, because you're done! Hit preview to see your new 3 column Minima Lefty Stretch layout, and then save the template. Best of luck with your blogging. I hope your new 3 column Minima Lefty Stretch template helps make your blogging even more fun and enjoyable!

Best of luck with your blogging. Links to this post are always welcome. If you would like to create a quick link in one of your posts or on your blogroll but are unsure how to do it, just insert this html string in your post text:

</a href="http://www.threecolumnblogger.com/">Three Column Blogger</a>

It will appear in your post text/blogroll as Three Column Blogger

Thanks!!

Three Column Minima Ochre

I looked all over the web for clear instructions on how to add a column to my blog and nearly went blind in the process. I absolutely thrilled the pharmacist with my headache and assured my stupified optometrist that I would upgrade to a new monitor. With these instucttions for adding a third column to your Minima Ochre template, you will have neither issue.

To be sure, the web is not completely devoid of instructions for adding columns. Bu many are "one-size-fits-all" instructions that were confusing to a newbie like me, and I found none that dealt specifically with Blogger's "Template" version. Nevertheless, if you are publishing via FTP to a "dot com" domain, like me and thousands of others, Template is the version you must use. So, for those of you who want to add a third colum to blogger templates published via FTP to your own domain, this site will be particularly useful.

Adding a third column to Minima Ochre is actually pretty easy, and these instructions make it even easier. Minima Ochre is one of the simplest templates out there, and it's also easy on the eyes, so readers like it.

The first thing you need to do is to determine whether you're using Blgger's "Template" version or Blogger's "Layout" version. To check, go into your dashboard and look just to the left of the "View Blog" link on the top left of the page. If the tab there says "Layout", you are using the Layout version of Minima Ochre, and the instructions for adding a third column to Layout are here.

If it says "Template" there instead, then you are using the "Classic" Template version of Minima Ochre and those instructions are a bit different. But don't worry, I've posted instructions for three column Minima Dark in Classic Template version here.

Once you finish adding your columns to Minima Ochre, you should also check out the instructions for adjusting your margins. I have also included a link to the post on adjusting your margins in the instructions for adding a column to Minima Dark in both the Layout and Classic Template versions.

Best of luck with your blogging. I hope your new three column Minima Ochre template helps make your blogging even more fun and enjoyable!

Three Column Minima Dark

I'm glad you found my blog on adding columns to your blogger template. I looked all over the web for clear instructions on how to turn my two column blog into a three column blog. I did manage find some worthwhile sites, but not all were entirely applicable, and I found none that dealt specifically with Blogger's "Classic Template" version. If you are publishing via FTP to a "dot com" domain, like thousands of others, Template is the version you must use. So, for those of you who want a three column blog published via FTP to your own domain, this site will be particularly useful.

Adding a third column to Minima Dark is actually pretty easy, and these instructions make it even easier. Minima Dark is one of the simplest templates out there, and it's also easy on the eyes, so readers like it.

The first thing you need to do is to determine whether you're using Blgger's "Template" version or Blogger's "Layout" version. To check, go into your dashboard and look just to the left of the "View Blog" link on the top left of the page. If the tab there says "Layout", you are using the Layout version of Minima Dark, and the instructions for adding a third column to Layout are here.

If it says "Template" there instead, then you are using the "Classic" Template version of Minima and those instructions are a bit different. But don't worry, I've posted instructions for three column Minima Dark in Classic Template version here.

Once you finish adding your columns to Minima Dark, you should also check out the instructions for adjusting your margins. I have also included direct a link to that post in the instructions for adding a column in the Layout and Classic Template versions of Minima Dark.

Best of luck with your blogging. I hope your new three column minima dark template makes your blogging even more fun and enjoyable!

Three Column Minima (Layout Version)

I started this blog because, like everyone who gets into blogging, I wanted to add a third column to my Minima template. Sadly, I also knew absolutely nothing about HTML, and nowhere could I find instructions that were all in one place and easy to understand. Three Column Blogger was then born. Update 1/2/10: Thank you all so much for your great comments, encouragement and suggestions. There are now over 300 comments, and Blogger has appended them - you'll need to click on the "more comments" link at the bottom of the page to post a comment or read new replies. I still read all of the comments, and I try to incorporate your suggestions into the main post. This has become a better resource for all as a result. As always, links are appreciated. Cheers!

These instructions are simple and easy, and you can do it if you don't know the first thing about HTML (which is perfect, because I don't). Minima is one of the simplest templates to modify, and it's also easy on the eyes, so both readers and bloggers like it.

This post is for adding a third column to Minima in "Layout Version". To check which version you're using, go into your dashboard and look just to the left of the "View Blog" link on the top left of the page. If the tab there says "Layout", you are using the Layout version of Minima and this post is for you. If it says "Template" there instead, then you are using the "Classic" Template version of Minima and those instructions are a bit different. But don't worry, I've posted instructions for three column Minima in Classic Template version here.

So let's get started! First, open up Blogger and go into your Dashboard, then click on the "Layout" tab. Then go into the "Edit HTML" tab. You will see a bunch of gobbledygook and gobbledygook it shall remain - you don't need to know anything about it. Just scroll down through the code until you see :

/* Header
-----------------------------------------------
(Note: you can also use your browser's control F (CTRL+F) command to search for this section. Just type in /* Header and then click the "next" button)

Now, change the width of the "header-wrapper" from 660 to 940;

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

That piece of code should now look EXACTLY like this:

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

Also, at the bottom of the same Header section, change the max-width from 660 to 940:

#description {
margin:0 5px 5px;
padding:0 20px 20px;
border:1px solid #eee;
border-width:0 1px 1px;
max-width:660px;<-------change to 940
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#999;
}

That piece of code should now look like this:

#description {
margin:0 5px 5px;
padding:0 20px 20px;
border:1px solid #eee;
border-width:0 1px 1px;
max-width:940px;
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#999;
}


So far so good. Next, scroll down (or use CTRL+F) to where it says:

/* Outer-Wrapper
----------------------------------------------- */

Now, just like you did in the Header above, change the "outer-wrapper" width from 660 to 940, and (2) change the "main-wrapper" width from 410 to 500

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

#main-wrapper {
width: 410px; <-------change to 500
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 */
}

Next, take this new block of code (in red) and paste it in exactly as it appears directly in between the "outer-wrapper" code and "main-wrapper" code. It's helpful to use "CTRL C" to copy, and then "CTRL V" to paste, if you didn't already know that trick. Regardless of how you do it, you must paste it in between these two code blocks, nowhere else. Update: the Google Gremlins may let some of you get away with using "left" instead of "$startSide" and "right" instead of "$endSide".

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

The new code block should look exactly like this:

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

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

#main-wrapper {
width: 500px;
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: 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 scroll way down the page to the footer section (or use CTRL F), it looks like this:

/* Footer
----------------------------------------------- */

Change the width of the "footer" from 660 to 940.

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

At this point, believe it or not, there are only two more steps. This particular step is hard only because you need to make sure you paste the additional code in the right spot, and this next spot can be a hard place to identify (CTRL+F helps here a lot).

Anyway, in the same footer section that you're now in, scroll down until you see:

<div id='content-wrapper'>

Then, locate the the "main wrapper" id a few lines below it. It looks like this:

<div id='main-wrapper'>

Now, just above the "main wrapper" id, paste in the following code EXACTLY as it appears below:

<div id='left-sidebar-wrapper'>
<b:section class='sidebar' id='left-sidebar' preferred='yes'>
<b:widget id='BloggerButton1' locked='false' title='' type='BloggerButton'/>
</b:section>
</div>

Note: this will also temporarily insert the Blogger logo button into your new sidebar, but you can delete that and add the widget of your own choice after you finish adding the column. Update: If you get an error message that says the widget ID should be unique, you have an existing blogger button already loaded in your original sidebar and you'll have to delete that one temporarily. But don't worry, you can customize all of your sidebars when you get them all set up. If not, there's no need to worry about it - the button is just a placeholder and you can replace and rearrange all of your widgets when you finish.

So, after you do that, the newly modified section should now look like this:

<div id='content-wrapper'>

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>
<div id='left-sidebar-wrapper'>
<b:section class='sidebar' id='left-sidebar' preferred='yes'>
<b:widget id='Gadget1' locked='false' title='Geo IP Tool' type='Gadget'/>
</b:section>
</div>

<div id='main-wrapper'>

And you are a now master Minima coder, because you're done! Hit preview to see your new three column Minima layout, and then save the template. Now you can go into the "Layouts" and add a new google gadget of your choice. You can also read this article for instructions on how to adjust your margins to make more space in between your columns.

If you have any trouble with your "nav bar" or would simply like to turn it off, insert the following code (in red) exactly where I have placed it:

Blogger Template Style
Name: Minima
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 26 Feb 2004
Updated by: Blogger Team
----------------------------------------------
#navbar-iframe {
display: none !important;
}

Best of luck with your blogging. If this post was helpful, I would really appreciate a link. If you would like to create a link in one of your posts or on your blogroll but are unsure how to do it, just insert this html string in your post text:

</a href="http://www.threecolumnblogger.com/">Three Column Blogger</a>

It will appear in your post text/blogroll as Three Column Blogger

Thanks!!

Adjusting Margins for Three Column Minima in Classic Template

In the earlier related post, we showed you how to turn your free two column Minima Blogger template into a three column Minima template. After you get your three columns all set up, you'll probably also want to adjust your margins. Your blog will be fine without this step, but you'll probably notice that your columns appear a little "squished". Have no fear, it's easy to fix, and once you learn how you can customize your blog's look, including column widths, to almost any desire.

This post is for adjusting margins in "Classic Template" version. Update 6/18/09: this post has been updated and corrected, thanks to comments from "Z", "Steve and Susan" and "34 Something". These instructions are now consistent with the post on adding a third column to Minima in Classic Version, so you should have no problem correlating those instructions with these instructions. Sorry for the confusion!

If you forgot which version you're using, just go into your dashboard and look to the left of the "View Blog" link. If the tab there says "Template", you are using classic version of Blogger and this post is for you. If it says "Layout" there instead, then you are using the "Layout" Template and those instructions are here.

Like the instructions for adding columns, these instructions are also simple and easy, and you can do it if you don't know the first thing about HTML.

In the Three Column Blogger tutorial on adding a column to Minima in Classic Template, you made room for the new column by increasing the width of the page to 940 pixels.

Consequently, when you adjust your margins, the width of the sidebars, the main post column and all the margins must collectively add up to 940. If they exceed 940, one of your columns will drop to the bottom of the page. If they are less than 940, you will still see all three columns but the layout may be asymmetrical. So get out your calculator and let's begin!

First, open up Blogger and go into your Dashboard, then click on the "Layout" tab. Then go into the "Edit HTML" tab. Next, scroll down (or use CTRL+F) to where it says:

/* Content
----------------------------------------------- */

Now, you are going to paste some code in to add margins to your new columns. It's helpful here to remember the "ctrl c" trick to copy and "ctrl v" to paste - much faster and easier. The code you are going to paste in will be the exact same every time. It is:

margin right:
margin left:

First, we will add margins to the "left-sidebar-wrapper". To do that, paste the following code in between the sidebar's "width" and "float" designations:

margin-right: 15px;
margin-left: 5px;

Next, we will move to the "#main" section. Paste the following code in between the main-content's "width" and "float" designations:

margin-right: 10px;
margin-left: 10px;

Then, we'll do the same thing for the "#sidebar" section, which is identified in the code as the "sidebar-wrapper". Paste the following code in between the right sidebar's "width" and "float" designations:

margin-right: 5px;
margin-left: 15px;

Now for the math. These margins added 60 pixels to the main page, and there are 20 pixels of "buffer" padding on the outer page border, so we'll need to reduce the width of the columns by a collective 80 pixels. In this example, I have chosen to reduce the width of all three columns, but you can also reduce the main post width alone, or just the two sidebars (as long as it all adds up to 80). This is what you need to do in order to reduce all the column widths:

#left-sidebar {
width: 220px;<-------change to 200
margin-right: 15px;
margin-left: 5px;
float:left;
}
#main {
width:500px;<-------change to 460
margin-right: 10px;
margin-left: 10px;
float:left;
}
#sidebar {
width:220px;<-------change to 200
margin-right: 5px;
margin-left: 15px;
float:right;
}


Your finished block of code with the new margins should now look like this:

#left-sidebar-wrapper {
width: 200px;
margin-right: 15px;
margin-left: 5px;
float: left;
}
#main {
width: 460px;
margin-right: 10px;
margin-left: 10px;
float: left;
}
#sidebar {
width: 200px;
margin-right: 5px;
margin-left: 10px;
float: right;
}

Hit "preview" to see your new three column blogger layout with the new margins, and then save the template if everything is ok. And now you really are a now master minima coder! Not only are you completely done, but you are also armed with enough knowledge to increase the width of your columns and main page in order to fit custom widgets and other "non-google" add-ins.

Best of luck with your blogging. I hope this article on adding margins to your three column template was helpful!

Adjusting Three Column Margins in Layout

In the earlier related post, your faithful servant showed you how to turn your free two column Minima Blogger template into a three column Minima template. After you get your three columns all set up, you'll probably want to adjust your margins. Your blog will be fine without this step, but you'll probably notice that your columns appear "squished" in together. Have no fear, it's easy to fix, and once you learn how you can customize your blog's look to almost any desire.

This post is for adjusting margins in "Layout Version". If you forgot which version you're using, just go into your dashboard and look to the left of the "View Blog" link. If the tab there says "Layout", you are using the Layout version of Minima and this post is for you. If it says "Template" there instead, then you are using the "Classic" Template version of Minima and those instructions are here.

Like the instructions for adding columns, these instructions are also simple and easy, and you can do it if you don't know the first thing about HTML.

In the Three Column Blogs tutorial on adding a column to Minima in Layout, you made room for the new column by increasing the width of the page to 940 pixels.

Consequently, when you adjust your margins, the width of the sidebars, the main post column and all the margins must collectively add up to 940. If they exceed 940, one of your columns will drop to the bottom of the page. If they are less than 940, you will still see all three columns but the layout will be asymmetrical. So get out your calculator and let's begin!

First, open up Blogger and go into your Dashboard, then click on the "Layout" tab. Then go into the "Edit HTML" tab. Next, scroll down (or use CTRL+F) to where it says:

/* Outer-Wrapper
----------------------------------------------- */

Now, you are going to paste some code in to add margins to your new columns. It's helpful here to remember the "ctrl c" trick to copy and "ctrl v" to paste - it's much faster and easier. The code you are going to paste in will be the exact same every time. It is:

margin right:
margin left:

First, we will add margins to the "left-sidebar-wrapper". To do that, paste the following code in between the sidebar's "width" and "float" designations:

margin-right: 10px;
margin-left: 5px;

Next, we will move to the "main-wrapper". Paste the following code in between the main-content's "width" and "float" designations:

margin-right: 15px;
margin-left: 15px;

Then, we'll do the same thing for the right sidebar wrapper, which is identified in the code as the "sidebar-wrapper". Paste the following code in between the right sidebar's "width" and "float" designations:

margin-right: 5px;
margin-left: 10px;

Now for the math. These margins added 70 pixels to the main page, so we'll need to reduce the width of the columns by a collective 70 pixels. In this example, I have chosen to reduce the width of the two sidebars, but you can also reduce the main post width alone, or all columns together. This is what you need to do in order to reduce the sidebar widths:

#left-sidebar-wrapper {
width: 220px;<-------change to 185
margin-right: 10px;
margin-left: 5px;
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: 220px;<-------change to 185
margin-right: 5px;
margin-left: 10px;
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 */
}

Your finished block of code with the new margins should now look like this:

#left-sidebar-wrapper {
width: 185px;
margin-right: 10px;
margin-left: 5px;
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 */
}

#main-wrapper {
width: 500px;
margin-right: 15px;
margin-left: 15px;
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: 185px;
margin-right: 5px;
margin-left: 10px;
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 */
}

Hit "preview" to see your new three column blogger layout with margins, and then save the template if everything is ok. And now you really are a now master minima coder! Not only are you completely done, but you are also armed with enough knowledge to increase the width of your columns and main page in order to fit custom widgets and other "non-google" add-ins.

Update: There are a lot of comments below about not enough space between columns, too much space, etc. These are personal preferences and they can easily be met - the great thing about the Blogger templates is that you can customize them to your heart's desire. Experiment! Just fiddle with the margin settings until your blog looks the way you want - it's easy. More pixels in your margins=more space between columns, less pixels in your margins=less space. Be careful not to add too much though, or your right column will drop to the bottom of the page.

Also, several people made comments about images/widgets/photos getting cut off in their sidebars - again, you need to either reduce the size of the image/widget/photo to fit in your sidebar, or increase the width of the sidebar to accommodate the size of the widget. But be careful: if you make it too wide,your right column will drop to the bottom of the page.

Best of luck with your blogging. I hope this article on adding margins to your three column template did great things for your blog! If this post was helpful, please link to it! Cheers.

Three Column Minima (Classic Template Version)

My first experience in attempting to add a third column to Minima was incredibly frustrating. Not only could I not find instructions on three column Minima that were all in one place and easy to understand, but none of the examples I found were for Minima in the Classic Template version.

These instructions are for adding a third column to Minima in "Classic" Template version. To check which version you're using, go into your dashboard and look just to the left of the "View Blog" link on the top left of the page. If it says "Template" in the next tab to the left, then you are using the "Classic" Template version and this is the post for you. If it says "Layout" there instead, then click on over to Three Column Minima (Layout). You would definitely be using Classic Template if you are publishing via FTP to your own dot come domain on a third party host (Blogger doesn't support Layout on non-blogspot domains).

Making a three column blog is easy in either version of Minima, but it's a little different for each. If you're like me and completely frustrated by the lack of directions for the Template version of Minima, you've come to the right place. This post and about 10 minutes are all that separate you and your blog from three column nirvana!

These instructions are simple and easy, and you can do it even if you don't know the first thing about HTML (because I didn't when I started this, and I know what it's like).

First, open up Blogger, go into your Dashboard and click on the "Tempate" tab. Then go into the "Edit HTML" tab. You will see a bunch of gobbledygook and gobbledygook it shall remain - you don't need to know anything about it. Just scroll down (or, allow me to introduce your browser's control F (CTRL+F) command, you can just type in /* Header and click next) until you see this:

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

Now, change the width of the header width from 660 to 940:

@media all {
#header {
width:660px; <-------change to 940
margin:0 auto 10px;
>border:1px solid $bordercolor;
}

That piece of code should now look EXACTLY like this:

@media all {
#header {
width:940px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Also, at the bottom of the same Header section, change the max-width from 660 to 940:

#description {
margin:0 5px 5px;
padding:0 20px 20px;
border:1px solid #eee;
border-width:0 1px 1px;
max-width:660px;<-------change to 940
font:85%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#FFFFFF;
}

That piece of code should now look like this:

#description {
margin:0 5px 5px;
padding:0 20px 20px;
border:1px solid #eee;
border-width:0 1px 1px;
max-width:940px;
font:85%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#FFFFFF;
}

So far so good. Next, scroll down to the content section (or use CTRL+F), the beginning of the content section looks like this:

/* Content
----------------------------------------------- */

Now, just like you did in the Header above, change the "content" width from 660 to 940, and (2) change the "main" width from 410 to 500:

@media all {
#content{
width: 660px; <-------change to 940
margin:0 auto;
padding:0px;
text-align:left;
}

#main {
width: 410px; <-------change to 500
float:left;
}

Next, take this new block of code (in red, below) and paste it in exactly as it appears directly in between the #content code block and the #main code block. It's helpful to use "CTRL C" to copy, and then "CTRL V" to paste, if you didn't already know that trick. Regardless of how you do it, you must paste it in between these two code blocks, nowhere else.

#left-sidebar {
width: 220px;
float: left;
}

The new code block should look like this:

@media all {
#content{
width: 940px;
margin:0 auto;
padding:0px;
text-align:left;
}
#left-sidebar {
width: 220px;
float: left;
}
#main {
width: 500px;
margin:0 auto;
padding:0; text-align:left;
}
#sidebar {
width:220px;
float:right;
}
}
@media handheld {
#content {
width:90%;
}
#main {
width:100%;
float:none;
}
#sidebar {
width:100%;
float:none;
}
}

Then scroll way down the page to the footer section (or use CTRL F), the beginning of the footer section looks like this:

/* Footer
----------------------------------------------- */

Now, change the width of the footer from 660 to 940:

#footer {
width:660px; <-------change to 940
clear:both;
margin:0 auto;
}

At this point, believe it or not, there is only one more step. This particular step is hard only because you need to make sure you type in the additional code in the right spot, and this next spot can be a hard place to identify (CTRL+F helps here a lot).

Anyway, in the same footer section that you're now in, scroll down until you see the beginning of the "content" section, it looks like this:

<!-- Begin #content -->
<div id='content'>

Then, locate the the "main" section id a few lines below it. It looks like this:

<!-- Begin #main -->
<div id='main'><div id='main 2'>


Now, just above the "main" and "main2" id, paste in the following code EXACTLY as it appears (note, this code will insert text into your new sidebar as a placeholder, you can customize that later when you finish):

<div id="left-sidebar">
<h2 class="sidebar-title">New Text Titles</h2>
</div>

After you do that, the newly modified section should now look like this:

<!-- Begin #content -->
<div id='content'>

<div id="left-sidebar">
<h2 class="sidebar-title">New Text Titles</h2>
</div>

<!-- Begin #main -->
<div id="main"><div id="main2">

If it does, you are a now master minima coder, because you're done! Hit preview to see your new three column layout, and then save the template. Then you can go into the "Html Edit" tab and replace the "New Text Titles" placeholder with new text, a widget, or advertising. Just be sure to keep it all within the opening left-sidebar "div id" tag and the closing "</div>" tag.

At this point, you may also want to look at adjusting your column margins in Classic Template. That post will help you get more space in between the columns and achieve an even more custom look.

Best of luck with your blogging. If you found this helpful, links back to this post on three column minima are always welcome. Thanks!