Blogger 3 column Minima layout

The standard “Minima” Blogger template consists of an outer wrapper containing a header, a content wrapper (which is split into 2 floating columns) and a footer. So how do you create a 3 column layout?

Please note: before you make any alterations to your Blogger template ALWAYS save a backup copy to your hard drive. You can do this by selecting the “Layout” option in Blogger, then the “Edit HTML” option, then “Download Full Template.”

Adding a new column to the Minima Blogger template

Many Blogger templates are set up for a screen resolution of 800 by 600. In recent months when analysing the stats of my sites (using Google Analytics and Feedburner) I haven’t come across anyone who still uses this old resolution. With this in mind I think it’s safe to reconfigure our sites to suit a minimum screen resolution of 1024 by 768. However it’s always a good idea to leave a little space for browser chrome (the extra space used by browser scroll bars etc.), so I think that a width of 960 pixels is about perfect.

OK let's do it! Select the Blogger "Layout" option and then "Edit HTML." Now scroll down until you find the following code (the blue text):

#outer-wrapper { width: 660px; margin:0 auto; padding:10px; text-align:$startSide; font: $bodyfont; } #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 */ } #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 */ }

This code defines the outermost, surrounding wrapper (#outer-wrapper), the area where your posts will go (#main-wrapper) and a sidebar (#sidebar-wrapper).

Now replace the above code (the blue text) with the following code (the red text):

.clear { clear: both; display: block; overflow: hidden; width: 0; height: 0; } #outer-wrapper { width: 960px; margin:0 auto; padding:0px; text-align:$startSide; font: $bodyfont; } #main-wrapper { width: 569px; margin-right: 15px; margin-left: 20px; text-align: left; 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 */ } #sidebar-wrapper { width: 133px; margin-left: 20px; margin-right: 25px; float: right; word-wrap: nowrap; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } #newsidebar-wrapper { width: 133px; margin-left: 30px; margin-right: 15px; float: left; word-wrap: nowrap; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }

So what did we just do?

1. We defined style rules for a clearance div class (.clear).
2. We defined an additional sidebar (#newsidebar-wrapper).
3. We changed the width of the #outer-wrapper to 960px.
4. We changed the width of the #main-wrapper to 604px (including margins).
5. We changed the widths of the 2 sidebars to 178px (including margins).
6. We floated one sidebar and the #main-wrapper (where your posts appear) to the left and one sidebar to the right.
7. We also added some margins for content alignment.

Please note: it's vitally important that your widths, margins, padding and borders add up to no more than the width of their containers i.e. 604px + 178px + 178px = 960px. See my post - Troubleshooting 3 column Minima layout for more information on widths, margins, padding and borders.

Changing the widths of the header and footer

We should now adjust the widths of the #header-wrapper (where your banner image resides) and #footer (where you can put copyright information or anything else you like) to match the other widths.

Scroll down your Blogger template until you find the #header-wrapper code (the blue text):

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

and replace it with this (the red text):

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

OK now scroll down your Blogger template until you find the #footer code (the blue text):

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

and replace it with this (the red text):

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

The final step: centering your blog posts

Now all we need to do is add one final piece of code to the Blogger template. This will configure your newly customised Minima template to position your blog posts between the 2 sidebars.

OK now scroll down your Blogger template until you find the following code (the blue text):

<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>

And add this code (the red text) directly above it (REMEMBER - DO NOT REPLACE, ADD IT ABOVE):

<div id='newsidebar-wrapper'> <b:section class='sidebar' id='newsidebar' preferred='yes'> <b:widget id='Profile2' locked='false' title='About Me' type='Profile'/> </b:section> </div>

Earlier in this tutorial we added the “float: left” style rule to the #newsidebar-wrapper. By placing the above code before #main-wrapper (which also has the “float: left” style rule), we are telling the browser to display the #newsidebar-wrapper first, then the #main-wrapper, followed by the other #sidebar-wrapper (which has the “float: right” style rule). Or put simply – 3 columns with your blog posts in the centre.

Update (Feb 22 2009): Recently some people have been having problems with the original 'NewProfile' id - so I have changed it to 'Profile2' - which worked when I tested it in Blogger.

Please note: we have also told the #newsidebar-wrapper to display your Blogger Profile but this can easily be changed using Blogger’s Layout editor.

Now save your template and go into the Layout Editor. It should have changed from this:

Before...

To this:

After!

Please note: you can reconfigure the widths of your 3 columns (and any of your other divisional elements i.e. #outer-wrapper, #main-wrapper etc.) any way you want to, just remember to factor margins etc. into your calculations. If you do want to experiment, make sure you save a backup of your template beforehand.

It's also possible to display your blog posts on the left or right (by simply moving some code around in your template - just ask me and I will be more than happy to tell you how).

Update!: if you are having problems implementing your 3 column Minima Blogger layout you might like to check out my recent post - Troubleshooting 3 column Minima layout.

In my next article I'll show you how to "Create custom background images for your 3 column Minima Blogger template."