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!